#119: Improve pitch to zoom on Android

jobtoday · Apr 18, 2022 · 63254bf · 63254bf
1 parent 08840f1
commit 63254bf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 38 deletions.
diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ComponentType, useCallback, useEffect } from "react";
+import React, { ComponentType, useCallback, useRef, useEffect } from "react";
 import {
   Animated,
   Dimensions,
@@ -67,14 +67,11 @@ function ImageViewing({
   HeaderComponent,
   FooterComponent,
 }: Props) {
-  const imageList = React.createRef<VirtualizedList<ImageSource>>();
+  const imageList = useRef<VirtualizedList<ImageSource>>(null);
   const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
   const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
-  const [
-    headerTransform,
-    footerTransform,
-    toggleBarsVisible,
-  ] = useAnimatedComponents();
+  const [headerTransform, footerTransform, toggleBarsVisible] =
+    useAnimatedComponents();
 
   useEffect(() => {
     if (onImageIndexChange) {
@@ -88,7 +85,7 @@ function ImageViewing({
       imageList?.current?.setNativeProps({ scrollEnabled: !isScaled });
       toggleBarsVisible(!isScaled);
     },
-    [imageList],
+    [imageList]
   );
 
   if (!visible) {
@@ -108,15 +105,13 @@ function ImageViewing({
       <StatusBarManager presentationStyle={presentationStyle} />
       <View style={[styles.container, { opacity, backgroundColor }]}>
         <Animated.View style={[styles.header, { transform: headerTransform }]}>
-          {typeof HeaderComponent !== "undefined"
-            ? (
-              React.createElement(HeaderComponent, {
-                imageIndex: currentImageIndex,
-              })
-            )
-            : (
-              <ImageDefaultHeader onRequestClose={onRequestCloseEnhanced} />
-            )}
+          {typeof HeaderComponent !== "undefined" ? (
+            React.createElement(HeaderComponent, {
+              imageIndex: currentImageIndex,
+            })
+          ) : (
+            <ImageDefaultHeader onRequestClose={onRequestCloseEnhanced} />
+          )}
         </Animated.View>
         <VirtualizedList
           ref={imageList}
@@ -149,7 +144,13 @@ function ImageViewing({
           )}
           onMomentumScrollEnd={onScroll}
           //@ts-ignore
-          keyExtractor={(imageSrc, index) => keyExtractor ? keyExtractor(imageSrc, index) : imageSrc.uri || `${imageSrc}`}
+          keyExtractor={(imageSrc, index) =>
+            keyExtractor
+              ? keyExtractor(imageSrc, index)
+              : typeof imageSrc === "number"
+              ? `${imageSrc}`
+              : imageSrc.uri
+          }
         />
         {typeof FooterComponent !== "undefined" && (
           <Animated.View

diff --git a/src/components/ImageDefaultHeader.tsx b/src/components/ImageDefaultHeader.tsx
@@ -34,17 +34,16 @@ const styles = StyleSheet.create({
   closeButton: {
     marginRight: 8,
     marginTop: 8,
-    width: 45,
-    height: 45,
+    width: 44,
+    height: 44,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: 22.5,
+    borderRadius: 22,
     backgroundColor: "#00000077",
   },
   closeText: {
-    lineHeight: 25,
-    fontSize: 25,
-    paddingTop: 2,
+    lineHeight: 22,
+    fontSize: 19,
     textAlign: "center",
     color: "#FFF",
     includeFontPadding: false,

diff --git a/src/components/ImageItem/ImageItem.android.tsx b/src/components/ImageItem/ImageItem.android.tsx
@@ -6,14 +6,16 @@
  *
  */
 
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useRef, useState } from "react";
 
 import {
   Animated,
+  ScrollView,
   Dimensions,
   StyleSheet,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  NativeMethodsMixin,
 } from "react-native";
 
 import useImageDimensions from "../../hooks/useImageDimensions";
@@ -48,22 +50,24 @@ const ImageItem = ({
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
 }: Props) => {
-  const imageContainer = React.createRef<any>();
+  const imageContainer = useRef<ScrollView & NativeMethodsMixin>(null);
   const imageDimensions = useImageDimensions(imageSrc);
   const [translate, scale] = getImageTransform(imageDimensions, SCREEN);
   const scrollValueY = new Animated.Value(0);
   const [isLoaded, setLoadEnd] = useState(false);
 
   const onLoaded = useCallback(() => setLoadEnd(true), []);
-  const onZoomPerformed = (isZoomed: boolean) => {
-    onZoom(isZoomed);
-    if (imageContainer?.current) {
-      // @ts-ignore
-      imageContainer.current.setNativeProps({
-        scrollEnabled: !isZoomed,
-      });
-    }
-  };
+  const onZoomPerformed = useCallback(
+    (isZoomed: boolean) => {
+      onZoom(isZoomed);
+      if (imageContainer?.current) {
+        imageContainer.current.setNativeProps({
+          scrollEnabled: !isZoomed,
+        });
+      }
+    },
+    [imageContainer]
+  );
 
   const onLongPressHandler = useCallback(() => {
     onLongPress(imageSrc);
@@ -113,7 +117,7 @@ const ImageItem = ({
   };
 
   return (
-    <Animated.ScrollView
+    <ScrollView
       ref={imageContainer}
       style={styles.listItem}
       pagingEnabled
@@ -134,7 +138,7 @@ const ImageItem = ({
         onLoad={onLoaded}
       />
       {(!isLoaded || !imageDimensions) && <ImageLoading />}
-    </Animated.ScrollView>
+    </ScrollView>
   );
 };
 

diff --git a/src/components/ImageItem/ImageItem.ios.tsx b/src/components/ImageItem/ImageItem.ios.tsx
@@ -119,7 +119,6 @@ const ImageItem = ({
         ref={scrollViewRef}
         style={styles.listItem}
         pinchGestureEnabled
-        nestedScrollEnabled={true}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
         maximumZoomScale={maxScale}