Add comments for new cropper

1 files changed, 21 insertions, 6 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 25301e6a..94e772b6 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,6 +1,7 @@
 import {RouteProp} from '@react-navigation/core';
+import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {default as React, useEffect, useState} from 'react';
+import {default as React, useCallback, useEffect, useState} from 'react';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
@@ -27,17 +28,27 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   const {screenType, title, image} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
 
+  // Stores the coordinates of the cropped image
   const [x0, setX0] = useState<number>();
   const [x1, setX1] = useState<number>();
   const [y0, setY0] = useState<number>();
   const [y1, setY1] = useState<number>();
 
-  useEffect(() => {
-    navigation.dangerouslyGetParent()?.setOptions({
-      tabBarVisible: false,
-    });
-  }, []);
+  // Removes bottom navigation bar on current screen and add it back when navigating away
+  useFocusEffect(
+    useCallback(() => {
+      navigation.dangerouslyGetParent()?.setOptions({
+        tabBarVisible: false,
+      });
+      return () => {
+        navigation.dangerouslyGetParent()?.setOptions({
+          tabBarVisible: true,
+        });
+      };
+    }, [navigation]),
+  );
 
+  // Setting original aspect ratio of image
   useEffect(() => {
     if (image.sourceURL) {
       Image.getSize(
@@ -50,6 +61,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
     }
   }, []);
 
+  // Crops original image based of (x0, y0) and (x1, y1) coordinates
   const handleNext = () => {
     if (
       x0 !== undefined &&
@@ -87,6 +99,9 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
     }
   };
 
+  /* Records (x0, y0) and (x1, y1) coordinates used later for cropping,
+   * based on(x, y) - the center of the image and scale of zoom
+   */
   const onMove = (position: IOnMove) => {
     Image.getSize(
       image.path,