2 files changed, 39 insertions, 10 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'}
diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index e53ed258..232568f1 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -23,7 +23,9 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
   const navigation = useNavigation();
   const state = useStore().getState();
   const commentCountText =
-    commentsCount === 0 ? 'No Comments' : commentsCount + ' comments';
+    !commentsCount || commentsCount === 0
+      ? 'No Comments'
+      : commentsCount + ' comments';
 
   return (
     <TouchableOpacity
@@ -35,7 +37,7 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
         })
       }>
       <Text style={styles.whiteBold}>{commentCountText}</Text>
-      {commentPreview !== null && (
+      {commentPreview && (
         <View style={styles.previewContainer}>
           <Image
             source={{
@@ -50,7 +52,7 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
             {renderTextWithMentions({
               value: commentPreview.comment,
               styles: styles.normalFont,
-              partTypes: mentionPartTypes('white'),
+              partTypes: mentionPartTypes('white', 'comment'),
               onPress: (user: UserType) =>
                 navigateToProfile(
                   state,