Fix bottom tab permanently hidden issue

1 files changed, 14 insertions, 6 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 4e8f9e7c..54acc26e 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 React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom from 'react-native-image-pan-zoom';
@@ -26,11 +27,18 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   const {screenType, title, image} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
 
-  useEffect(() => {
-    navigation.dangerouslyGetParent()?.setOptions({
-      tabBarVisible: false,
-    });
-  }, []);
+  useFocusEffect(
+    useCallback(() => {
+      navigation.dangerouslyGetParent()?.setOptions({
+        tabBarVisible: false,
+      });
+      return () => {
+        navigation.dangerouslyGetParent()?.setOptions({
+          tabBarVisible: true,
+        });
+      };
+    }, [navigation]),
+  );
 
   useEffect(() => {
     if (image.sourceURL) {