React-native-lightbox-gallery NPM

react-native-lightbox-gallery

React Native modal component for viewing images as a sliding gallery. Forked from react-native-image-viewing

🔥Pinch zoom for both iOS and Android
🔥Double tap to zoom for both iOS and Android
🔥Supports swipe-to-close animation
🔥Custom header and footer components
🔥Uses VirtualizedList to optimize image loading and rendering

Expo

Try react-native-image-viewing with Expo: https://expo.io/@antonkalinin/react-native-image-viewing

Installation

yarn add react-native-lightbox-gallery

npm install --save react-native-lightbox-gallery

Usage

import ImageView from 'react-native-lightbox-gallery';

const images = [
    {
        uri: 'https://images.unsplash.com/photo-1571501679680-de32f1e7aad4',
    },
    {
        uri: 'https://images.unsplash.com/photo-1573273787173-0eb81a833b34',
    },
    {
        uri: 'https://images.unsplash.com/photo-1569569970363-df7b6160d111',
    },
];

const [visible, setIsVisible] = useState(false);

<ImageView
    images={images}
    imageIndex={0}
    visible={visible}
    onRequestClose={() => setIsVisible(false)}
/>;

Props

Prop name	Description	Type	Required
`images`	Array of images to display	ImageSource[]	true
`keyExtractor`	Uniqely identifying each image	(imageSrc: ImageSource, index: number) => string	false
`imageIndex`	Current index of image to display	number	true
`visible`	Is modal shown or not	boolean	true
`onRequestClose`	Function called to close the modal	function	true
`onImageIndexChange`	Function called when image index has been changed	function	false
`onLongPress`	Function called when image long pressed	function (event: GestureResponderEvent, image: ImageSource)	false
`delayLongPress`	Delay in ms, before onLongPress is called: default `800`	number	false
`animationType`	Animation modal presented with: default `fade`	`none`, `fade`, `slide`	false
`presentationStyle`	Modal presentation style: default: `fullScreen` Android: Use `overFullScreen` to hide StatusBar	`fullScreen`, `pageSheet`, `formSheet`, `overFullScreen`	false
`backgroundColor`	Background color of the modal in HEX (#000000EE)	string	false
`swipeToCloseEnabled`	Close modal with swipe up or down: default `true`	boolean	false
`doubleTapToZoomEnabled`	Zoom image by double tap on it: default `true`	boolean	false
`HeaderComponent`	Header component, gets current `imageIndex` as a prop	component, function	false
`FooterComponent`	Footer component, gets current `imageIndex` as a prop	component, function	false

type ImageSource = ImageURISource | ImageRequireSource

License

MIT

react react-native image gallery image-gallery image-viewer

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago