Add pan zoom library

4 files changed, 51 insertions, 13 deletions

diff --git a/package.json b/package.json
index 5b07e8b3..01c79a37 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-native-hyperlink": "^0.0.19",
     "react-native-image-crop-picker": "^0.36.0",
     "react-native-image-crop-tools": "^1.3.6",
+    "react-native-image-pan-zoom": "^2.1.12",
     "react-native-image-picker": "^4.0.3",
     "react-native-image-resizer": "^1.4.4",
     "react-native-inappbrowser-reborn": "^3.5.0",
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
new file mode 100644
index 00000000..1620d777
--- /dev/null
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -0,0 +1,30 @@
+import {RouteProp} from '@react-navigation/core';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React from 'react';
+import {Image, Dimensions, Text} from 'react-native';
+import ImageZoom from 'react-native-image-pan-zoom';
+import {SCREEN_WIDTH} from '../../utils';
+import {MainStackParams} from '../../routes';
+
+type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
+
+interface ZoomInCropperProps {
+  route: ZoomInCropperRouteProps;
+}
+
+export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({route}) => {
+  return (
+    <ImageZoom
+      cropWidth={Dimensions.get('window').width}
+      cropHeight={Dimensions.get('window').height}
+      imageWidth={200}
+      imageHeight={200}>
+      <Image
+        style={{width: 200, height: 200}}
+        source={{
+          uri: route.params.imageURI,
+        }}
+      />
+    </ImageZoom>
+  );
+};
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index bdd1fbeb..4afacddb 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -66,19 +66,21 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   useEffect(() => {
     setTimeout(
       () => {
-        imageRef.current.measure(
-          (
-            fx: number, // location of ref relative to parent element
-            fy: number,
-            width: number,
-            height: number,
-            _x: number, // location of ref relative to entire screen
-            _y: number,
-          ) => {
-            setOffset([fx, fy]);
-            setImageDimensions([width, height]);
-          },
-        );
+        if (imageRef && imageRef.current) {
+          imageRef.current.measure(
+            (
+              fx: number, // location of ref relative to parent element
+              fy: number,
+              width: number,
+              height: number,
+              _x: number, // location of ref relative to entire screen
+              _y: number,
+            ) => {
+              setOffset([fx, fy]);
+              setImageDimensions([width, height]);
+            },
+          );
+        }
       },
       editing ? 100 : 0,
     );
diff --git a/yarn.lock b/yarn.lock
index c4c5ec2e..c7f8ff47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6450,6 +6450,11 @@ react-native-image-crop-tools@^1.3.6:
   resolved "https://registry.yarnpkg.com/react-native-image-crop-tools/-/react-native-image-crop-tools-1.3.6.tgz#c7060c61f6e81b64b9f279b5e9b2a42f35209d1a"
   integrity sha512-MXz+4k6SHwbvRHfifws9Jhd//rEQD5NC/2SKy80cRbc13XsWDA9bkIY396HCQrpwBT8zXLF7DjyTSEq+GqbBMg==
 
+react-native-image-pan-zoom@^2.1.12:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz#eb98bf56fb5610379bdbfdb63219cc1baca98fd2"
+  integrity sha512-BF66XeP6dzuANsPmmFsJshM2Jyh/Mo1t8FsGc1L9Q9/sVP8MJULDabB1hms+eAoqgtyhMr5BuXV3E1hJ5U5H6Q==
+
 react-native-image-picker@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.0.3.tgz#dd8d393e0c57321688885c74b52244ad36e532d6"