Allow to not hide bars on zoom

README.md

@@ -77,6 +77,8 @@ const [visible, setIsVisible] = useState(false);
 | `doubleTapToZoomEnabled` | Zoom image by double tap on it: default `true`                                                      | boolean                                                     | false    |
 | `HeaderComponent`        | Header component, gets current `imageIndex` as a prop                                               | component, function                                         | false    |
 | `FooterComponent`        | Footer component, gets current `imageIndex` as a prop                                               | component, function                                         | false    |
+| `hideHeaderOnZoom`       | Hide Header when image is zoomed                                                                    | boolean                                                     | false    |
+| `hideFooterOnZoom`       | Hide Footer when image is zoomed                                                                    | boolean                                                     | false    |   
 
 - type ImageSource = ImageURISource | ImageRequireSource
 

src/ImageViewing.tsx

@@ -39,6 +39,8 @@ type Props = {
   backgroundColor?: string;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  hideHeaderOnZoom?: boolean;
+  hideFooterOnZoom?: boolean;
   delayLongPress?: number;
   HeaderComponent?: ComponentType<{ imageIndex: number }>;
   FooterComponent?: ComponentType<{ imageIndex: number }>;
@@ -49,6 +51,8 @@ const DEFAULT_BG_COLOR = "#000";
 const DEFAULT_DELAY_LONG_PRESS = 800;
 const SCREEN = Dimensions.get("screen");
 const SCREEN_WIDTH = SCREEN.width;
+const DEFAULT_HIDE_HEADER_ON_ZOOM = true;
+const DEFAULT_HIDE_FOOTER_ON_ZOOM = true;
 
 function ImageViewing({
   images,
@@ -66,6 +70,8 @@ function ImageViewing({
   delayLongPress = DEFAULT_DELAY_LONG_PRESS,
   HeaderComponent,
   FooterComponent,
+  hideHeaderOnZoom = DEFAULT_HIDE_HEADER_ON_ZOOM,
+  hideFooterOnZoom = DEFAULT_HIDE_FOOTER_ON_ZOOM,
 }: Props) {
   const imageList = React.createRef<VirtualizedList<ImageSource>>();
   const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
@@ -86,9 +92,9 @@ function ImageViewing({
     (isScaled: boolean) => {
       // @ts-ignore
       imageList?.current?.setNativeProps({ scrollEnabled: !isScaled });
-      toggleBarsVisible(!isScaled);
+      toggleBarsVisible(!isScaled, hideHeaderOnZoom, hideFooterOnZoom);
     },
-    [imageList],
+    [imageList, hideHeaderOnZoom, hideFooterOnZoom],
   );
 
   if (!visible) {

src/hooks/useAnimatedComponents.ts

@@ -18,23 +18,30 @@ const useAnimatedComponents = () => {
   const headerTranslate = new Animated.ValueXY(INITIAL_POSITION);
   const footerTranslate = new Animated.ValueXY(INITIAL_POSITION);
 
-  const toggleVisible = (isVisible: boolean) => {
+  const toggleVisible = (
+    isVisible: boolean,
+    hideHeaderOnZoom: boolean,
+    hideFooterOnZoom: boolean
+  ) => {
     if (isVisible) {
       Animated.parallel([
         Animated.timing(headerTranslate.y, { ...ANIMATION_CONFIG, toValue: 0 }),
         Animated.timing(footerTranslate.y, { ...ANIMATION_CONFIG, toValue: 0 }),
       ]).start();
     } else {
-      Animated.parallel([
-        Animated.timing(headerTranslate.y, {
-          ...ANIMATION_CONFIG,
-          toValue: -300,
-        }),
-        Animated.timing(footerTranslate.y, {
-          ...ANIMATION_CONFIG,
-          toValue: 300,
-        }),
-      ]).start();
+      const hideHeaderAnimation = hideHeaderOnZoom
+        ? [Animated.timing(headerTranslate.y, {
+            ...ANIMATION_CONFIG,
+            toValue: -300,
+          })]
+        : [];
+      const hideFooterAnimation = hideFooterOnZoom
+        ? [Animated.timing(footerTranslate.y, {
+            ...ANIMATION_CONFIG,
+            toValue: 300,
+          })]
+        : [];
+      Animated.parallel([...hideHeaderAnimation, ...hideFooterAnimation]).start();
     }
   };