@luu-truong/react-native-image-viewer NPM

React Native Image Viewer

Double tap to zoom image
Pinch to zoom image
Swipe down to close
Caption and summaries

Installation

Yarn:

yarn add @luu-truong/react-native-image-viewer react-native-gesture-handler

NPM:

npm install @luu-truong/react-native-image-viewer react-native-gesture-handler

To complete installation you must following this guide to setup react-native-gesture-handler

Usage:

import ImageViewer from '@luu-truong/react-native-image-viewer';

function Example() {
  const [visible, setVisible] = React.useState(false);
  
  const images = [
    {
      source: {
        uri: 'https://...',
        headers: {
          'X-Custom-Header': 'foo',
        },
        width: 1200,
        height: 600
      },
      title: 'blah blah'
    },
    {
      source: require('image.png'),
    }
  ];
  
  return (
    <>
      <ImageViewer images={images} visible={visible} onClose={() => setVisible(false)} imageProps={{
        initialWidth: 200,
        initialHeight: 200,
        renderFooter: (title?: string) => (<Text>{title}</Text>)
      }} />
    </>
  );
}

Documentation

Image Viewer Component Props:

Name	Type	Required	Description
debug	boolean	no	Print debug message. Default: false
imageProps	object	no	Props passed to Image component. See Image Component Props
visible	boolean	yes
images	Array	yes
initialIndex	number	no	Show image index at initialize
onClose	() => void	yes	Callback when close image viewer
animationType	string	no

Image Component Props:

Name	Type	Required	Description
initialWidth	number	no	Default: 200
initialHeight	number	no	Default: 200
renderFooter	(title?: string) => JSX.Element	null	no	Default: undefined
debug	boolean	no	Default: false