1 files changed, 34 insertions, 21 deletions

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c6ed1116..37b37264 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -1,6 +1,7 @@
 import CameraRoll from '@react-native-community/cameraroll';
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
-import {RouteProp, useFocusEffect} from '@react-navigation/core';
+import {RouteProp} from '@react-navigation/core';
+import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {createRef, useCallback, useEffect, useState} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
@@ -15,7 +16,7 @@ import {
 } from '../../components';
 import {MainStackParams} from '../../routes';
 import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils';
-import {takePicture} from '../../utils/camera';
+import {showGIFFailureAlert, takePicture} from '../../utils/camera';
 
 type CameraScreenRouteProps = RouteProp<MainStackParams, 'CameraScreen'>;
 export type CameraScreenNavigationProps = StackNavigationProp<
@@ -36,9 +37,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
   const [showSaveButton, setShowSaveButton] = useState<boolean>(false);
 
-  /*
-   *  Removes bottom navigation bar on current screen and add it back when navigating away
-   */
   useFocusEffect(
     useCallback(() => {
       navigation.dangerouslyGetParent()?.setOptions({
@@ -68,16 +66,24 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       );
   }, [capturedImage]);
 
-  /*
-   *  Appears once a picture has been captured to navigate to the caption screen
-   */
-  const handleNext = () => {
+  const navigateToCropper = (uri: string) => {
+    navigation.navigate('ZoomInCropper', {
+      screenType,
+      title,
+      media: {
+        uri,
+        isVideo: false,
+      },
+    });
+  };
+
+  const navigateToCaptionScreen = () => {
     navigation.navigate('CaptionScreen', {
       screenType,
       title,
-      image: {
-        filename: capturedImage,
-        path: capturedImage,
+      media: {
+        uri: capturedImage,
+        isVideo: false,
       },
     });
   };
@@ -116,7 +122,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         )}
         <TouchableOpacity
           onPress={() =>
-            takePicture(cameraRef, setShowSaveButton, setCapturedImage)
+            takePicture(cameraRef, (pic) => {
+              setShowSaveButton(true);
+              setCapturedImage(pic.uri);
+            })
           }
           style={styles.captureButtonContainer}>
           <View style={styles.captureButton} />
@@ -124,7 +133,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         <View style={styles.bottomRightContainer}>
           {capturedImage ? (
             <TaggSquareButton
-              onPress={handleNext}
+              onPress={navigateToCaptionScreen}
               title={'Next'}
               buttonStyle={'large'}
               buttonColor={'blue'}
@@ -135,8 +144,17 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           ) : (
             <GalleryIcon
               mostRecentPhotoUri={mostRecentPhoto}
-              screenType={screenType}
-              title={title}
+              callback={(pic) => {
+                const filename = pic.filename;
+                if (
+                  filename &&
+                  (filename.endsWith('gif') || filename.endsWith('GIF'))
+                ) {
+                  showGIFFailureAlert(() => navigateToCropper(pic.path));
+                } else {
+                  navigateToCropper(pic.path);
+                }
+              }}
             />
           )}
         </View>
@@ -155,11 +173,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: 'black',
   },
-  preview: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
   captureButtonContainer: {
     alignSelf: 'center',
     backgroundColor: 'transparent',