image cropper dump

1 files changed, 94 insertions, 0 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;