#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.

#Modal Components

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

import { 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}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}

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

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

  return (
    <Modal
      isVisible={visible}
      onBackButtonPress={() => setVisible(false)}
      onBackdropPress={() => setVisible(false)}
      hasBackdrop={false}
      style={styles.modal}
      useNativeDriver={true}
      hideModalContentWhileAnimating={true}
      animationInTiming={300}
      animationOutTiming={300}
    >
      <GestureViewer
        data={images}
        renderItem={renderImage}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}

#Render Window

Version 3 uses an internal render window instead of a consumer-supplied list component. Use renderItem for content customization, and tune windowSize or pageSpacing only when the default window is not enough.

function App() {
  return <GestureViewer data={images} renderItem={renderImage} windowSize={5} pageSpacing={16} />;
}

#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} />;
}

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} />;