v3 beta is live. Learn more
React Native Gesture Image Viewer
  • English
  • 2.x

      • Custom Components

      react-native-gesture-image-viewer offers powerful complete component customization. You can create gesture-supported items with not only images but any component you want.

      You can create a viewer using any Modal of your choice as shown below:

      Use Modal
      Use react-nativee-modal
      import { FlatList, Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={FlatList}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}

      List Components

      Support for any list component like ScrollView, FlatList, FlashList through the ListComponent prop.
      The listProps provides type inference based on the selected list component, ensuring accurate autocompletion and type safety in your IDE.

      import { FlashList } from '@shopify/flash-list';

function App() {
  return (
    <GestureViewer
      data={images}
      ListComponent={FlashList}
      listProps={
        {
          // ✅ FlashList props autocompletion
        }
      }
    />
  );
}

      Content Components

      You can inject various types of content components like expo-image, FastImage, etc., through the renderItem prop to use gestures.

      import { GestureViewer } from 'react-native-gesture-image-viewer';
import { Image } from 'expo-image';

function App() {
  const renderImage = useCallback((imageUrl: string) => {
    return (
      <Image
        source={{ uri: imageUrl }}
        style={{ width: '100%', height: '100%' }}
        contentFit="contain"
      />
    );
  }, []);

  return <GestureViewer data={images} renderItem={renderImage} />;
}

      renderItem active state (isActive)

      For content such as video that should play or perform work only while it is visible, use isActive from the third renderItem argument. It is true only for the currently selected content. During a page transition, the previous content remains active; when the move finishes, the newly selected content becomes active. Use useGestureViewerState instead when UI outside the item needs the global currentIndex.

      import type { GestureViewerRenderItemInfo } from 'react-native-gesture-image-viewer';

const renderMedia = useCallback(
  (item: MediaItem, _index: number, { isActive }: GestureViewerRenderItemInfo) => {
    return (
      <Video
        source={{ uri: item.uri }}
        style={{ width: '100%', height: '100%' }}
        paused={!isActive}
        resizeMode="contain"
      />
    );
  },
  [],
);

return <GestureViewer data={mediaItems} renderItem={renderMedia} />;