1 files changed, 34 insertions, 7 deletions
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 4e8f9e7c..d238d6ae 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,12 +1,18 @@
 import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
-import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native';
+import {
+  Dimensions,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom from 'react-native-image-pan-zoom';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {MainStackParams} from '../../routes';
-import {HeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {HeaderHeight, SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
 import {TaggSquareButton} from '../common';
 
 type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
@@ -51,11 +57,22 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
       <ImageZoom
-        style={{backgroundColor: 'black'}}
-        cropWidth={Dimensions.get('window').width}
-        cropHeight={Dimensions.get('window').height}
+        style={{backgroundColor: 'white'}}
+        cropWidth={SCREEN_WIDTH}
+        cropHeight={SCREEN_HEIGHT}
         imageWidth={SCREEN_WIDTH}
-        imageHeight={SCREEN_WIDTH / aspectRatio}>
+        imageHeight={SCREEN_WIDTH / aspectRatio}
+        onMove={(position) =>
+          console.log(
+            'hi',
+            position.positionX,
+            position.positionY,
+            position.scale,
+            position.zoomCurrentDistance,
+            SCREEN_WIDTH,
+            SCREEN_HEIGHT,
+          )
+        }>
         <Image
           style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
           source={{
@@ -64,7 +81,17 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         />
       </ImageZoom>
       <TaggSquareButton
-        onPress={() => console.log('Navigate to caption screen')}
+        onPress={() => {
+          if (image && image.filename && image.sourceURL) {
+            navigation.navigate('CaptionScreen', {
+              screenType,
+              title: title,
+              image: {filename: image.filename, path: image.sourceURL},
+            });
+          } else {
+            Alert.alert('Invalid image file.');
+          }
+        }}
         title={'Next'}
         buttonStyle={'normal'}
         buttonColor={'blue'}