feat: add prop to disable swipe

Author: geobako

README.md

@@ -92,11 +92,11 @@ const MyGallery = () => {
   const openGallery = () => setIsOpen(true);
   const closeGallery = () => setIsOpen(false);
 
-  const renderHeaderComponent = (image: any, currentIndex: number) => {
+  const renderHeaderComponent = (image: ImageObject, currentIndex: number) => {
     return <Header currentIndex={currentIndex} />;
   };
 
-  const renderFooterComponent = (image: any, currentIndex: number) => {
+  const renderFooterComponent = (image: ImageObject, currentIndex: number) => {
     return <Footer total={images.length} currentIndex={currentIndex} />;
   };
 

example/src/App.tsx

@@ -28,11 +28,11 @@ const App = () => {
   const closeGallery = () => setIsOpen(false);
   const closeCustomGallery = () => setIsCustomGalleryOpen(false);
 
-  const renderHeaderComponent = (_image: any, currentIndex: number) => {
+  const renderHeaderComponent = (_image: ImageObject, currentIndex: number) => {
     return <Header currentIndex={currentIndex} />;
   };
 
-  const renderFooterComponent = (_image: any, currentIndex: number) => {
+  const renderFooterComponent = (_image: ImageObject, currentIndex: number) => {
     return <Footer total={images.length} currentIndex={currentIndex} />;
   };
 

src/ImageGallery.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import { ImageObject, IProps, RenderImageProps } from './types';
 import ImagePreview from './ImagePreview';
-import PanContainer from './PanContainer';
+import SwipeContainer from './SwipeContainer';
 
 const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
 
@@ -37,6 +37,7 @@ const ImageGallery = (props: IProps & typeof defaultProps) => {
     thumbColor,
     thumbResizeMode,
     thumbSize,
+    disableSwipe,
   } = props;
 
   const [activeIndex, setActiveIndex] = useState(0);
@@ -148,7 +149,11 @@ const ImageGallery = (props: IProps & typeof defaultProps) => {
   return (
     <Modal animationType={isOpen ? 'slide' : 'fade'} visible={isOpen}>
       <View style={styles.container}>
-        <PanContainer setIsDragging={setIsDragging} close={close}>
+        <SwipeContainer
+          disableSwipe={disableSwipe}
+          setIsDragging={setIsDragging}
+          close={close}
+        >
           <FlatList
             initialScrollIndex={initialIndex}
             getItemLayout={getImageLayout}
@@ -162,7 +167,7 @@ const ImageGallery = (props: IProps & typeof defaultProps) => {
             scrollEnabled={!isDragging}
             showsHorizontalScrollIndicator={false}
           />
-        </PanContainer>
+        </SwipeContainer>
         {hideThumbs ? null : (
           <FlatList
             initialScrollIndex={initialIndex}

src/PanContainer.tsx

@@ -14,7 +14,7 @@ const PanContainer = ({
   setIsDragging,
 }: {
   children: any;
-  close: any;
+  close: () => void;
   setIsDragging: any;
 }) => {
   const translationXY = useRef(new Animated.ValueXY()).current;

src/SwipeContainer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PanContainer from './PanContainer';
+
+const SwipeContainer = ({
+  children,
+  close,
+  setIsDragging,
+  disableSwipe,
+}: {
+  children: any;
+  close: () => void;
+  setIsDragging: any;
+  disableSwipe?: boolean;
+}) => {
+  return disableSwipe ? (
+    <>{children}</>
+  ) : (
+    <PanContainer setIsDragging={setIsDragging} close={close}>
+      {children}
+    </PanContainer>
+  );
+};
+
+export default SwipeContainer;

src/types.ts

@@ -11,6 +11,7 @@ export interface IProps {
   thumbColor?: string;
   thumbSize?: number;
   thumbResizeMode?: ImageResizeMode;
+  disableSwipe?: boolean;
 
   renderCustomThumb?: (
     item: ImageObject,