image cropper dump

3 files changed, 98 insertions, 7 deletions

diff --git a/src/components/comments/ImageCropper.tsx b/src/components/comments/ImageCropper.tsx
new file mode 100644
index 00000000..7d4eabff
--- /dev/null
+++ b/src/components/comments/ImageCropper.tsx
@@ -0,0 +1,94 @@
+import {RouteProp} from '@react-navigation/core';
+import {useFocusEffect} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useCallback, useRef, useState} from 'react';
+import {Button, StatusBar, View} from 'react-native';
+import {CropView} from 'react-native-image-crop-tools';
+import {MainStackParams} from '../../routes';
+import {HeaderHeight} from '../../utils';
+
+type ImageCropperRouteProps = RouteProp<MainStackParams, 'ImageCropper'>;
+
+type ImageCropperNavigationProps = StackNavigationProp<
+  MainStackParams,
+  'ImageCropper'
+>;
+
+interface ImageCropperProps {
+  route: ImageCropperRouteProps;
+  navigation: ImageCropperNavigationProps;
+}
+
+const ImageCropper: React.FC<ImageCropperProps> = ({route, navigation}) => {
+  const {image, title, screenType} = route.params;
+  const cropViewRef = useRef();
+  const aspectRatios = [
+    {width: 9, height: 16},
+    {width: 4, height: 5},
+    {width: 1, height: 1},
+  ];
+  const [aspectRatioIndex, setAspectRatioIndex] = useState<number>(0);
+  //Function to get the parent TabBar navigator and setting the option for this screen.
+  useFocusEffect(
+    useCallback(() => {
+      navigation.dangerouslyGetParent()?.setOptions({
+        tabBarVisible: false,
+      });
+      return () => {
+        navigation.dangerouslyGetParent()?.setOptions({
+          tabBarVisible: true,
+        });
+      };
+    }, [navigation]),
+  );
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <View
+        style={{
+          flex: 1,
+          paddingTop: HeaderHeight,
+        }}>
+        <Button
+          title={'Toggle Ratio'}
+          onPress={() => {
+            setAspectRatioIndex(
+              aspectRatioIndex < 2 ? aspectRatioIndex + 1 : 0,
+            );
+          }}
+        />
+        <Button
+          title={'Done'}
+          onPress={() => {
+            if (cropViewRef && cropViewRef.current) {
+              cropViewRef.current.saveImage(100);
+            }
+          }}
+        />
+        {image !== undefined && (
+          <CropView
+            sourceUrl={image.sourceURL ? image.sourceURL : ''}
+            style={{
+              position: 'relative',
+              flex: 1,
+              marginBottom: '3%',
+            }}
+            onImageCrop={(res) => {
+              const arr = res.uri.split('/');
+              navigation.navigate('CaptionScreen', {
+                screenType,
+                title,
+                image: {filename: arr[arr.length - 1], path: res.uri},
+              });
+            }}
+            keepAspectRatio
+            aspectRatio={aspectRatios[aspectRatioIndex]}
+            ref={cropViewRef}
+          />
+        )}
+      </View>
+    </>
+  );
+};
+
+export default ImageCropper;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index ebd93844..d715714a 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,2 +1,3 @@
 export {default as CommentTile} from './CommentTile';
 export {default as AddComment} from './AddComment';
+export {default as ImageCropper} from './ImageCropper';
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index cde5b2e0..1c850b29 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,8 +7,8 @@ import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
-import PlusIcon from '../../assets/icons/plus-icon.svg';
 import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD} from '../../constants/strings';
@@ -52,15 +52,11 @@ const Moment: React.FC<MomentProps> = ({
         'Screenshots',
         'UserLibrary',
       ],
-      width: 580,
-      height: 580,
-      cropping: true,
-      cropperToolbarTitle: 'Upload a moment',
-      mediaType: 'photo',
+      mediaType: 'any',
     })
       .then((picture) => {
         if ('path' in picture) {
-          navigation.navigate('CaptionScreen', {
+          navigation.navigate('ImageCropper', {
             screenType,
             title: title,
             image: picture,