From f3134bbe9b8bc84a906ca1dac46959b360dd243f Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 16 Jun 2021 01:58:59 -0700
Subject: image cropper dump

---
 src/components/comments/ImageCropper.tsx | 94 ++++++++++++++++++++++++++++++++
 src/components/comments/index.ts         |  1 +
 src/components/moments/Moment.tsx        | 10 +---
 src/routes/main/MainStackNavigator.tsx   | 10 +++-
 src/routes/main/MainStackScreen.tsx      |  8 +++
 src/screens/profile/CaptionScreen.tsx    |  2 +-
 6 files changed, 116 insertions(+), 9 deletions(-)
 create mode 100644 src/components/comments/ImageCropper.tsx

(limited to 'src')

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,
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 8fce5e2f..757d89f7 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -38,7 +38,10 @@ export type MainStackParams = {
   };
   CaptionScreen: {
     title?: string;
-    image?: Image;
+    image?: {
+      filename: string;
+      path: string;
+    };
     screenType: ScreenType;
     selectedTags?: MomentTagType[];
     moment?: MomentType;
@@ -107,6 +110,11 @@ export type MainStackParams = {
   ChatList: undefined;
   Chat: undefined;
   NewChatModal: undefined;
+  ImageCropper: {
+    image: Image;
+    screenType: ScreenType;
+    title: string;
+  };
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 3be2ff28..cb23f9fc 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -3,6 +3,7 @@ import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {normalize} from 'react-native-elements';
+import {ImageCropper} from '../../components/comments';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   AccountType,
@@ -325,6 +326,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
             gestureEnabled: false,
           }}
         />
+        <MainStack.Screen
+          name="ImageCropper"
+          component={ImageCropper}
+          options={{
+            gestureEnabled: false,
+          }}
+        />
       </MainStack.Navigator>
     );
   };
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9e1b4674..74f774b9 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -197,7 +197,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             <Image
               style={styles.image}
               source={{uri: moment ? moment.moment_url : image?.path}}
-              resizeMode={'cover'}
+              resizeMode={'contain'}
             />
             <MentionInput
               containerStyle={styles.text}
-- 
cgit v1.2.3-70-g09d2