For AI agents: the complete documentation index is available at /1.x/llms.txt, the full documentation bundle is available at /1.x/llms-full.txt, and this page is available as Markdown at /1.x/guide/usage/custom-components.md.
v3 is stable. See what changed
React Native Gesture Image Viewer
  • English
  • 1.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} />;
}