@arlenwang/react-native-photo-gallery

react-native-photo-gallery

This library is a very simple, yet powerfull gallery component. It provides a native similar gallery including horizontal swiper, photo view, zoom, and pagination. Tested without stutters with 1000+ images.

Getting started

$ npm install react-native-photo-gallery --save

This library depends on react-native-photo-view to display images on Android. So you must also do the following :

$ react-native link react-native-photo-view

Usage

import Gallery from 'react-native-photo-gallery';

class YourGalleryComponent extends Component {
  render() {
    const data = [
      {
        id: 'first image',
        image: require('./yourImage.jpg'),
        thumb: require('./yourImageThumb.jpg'),
        overlay: <Overlay />
      },
      {
        id: 'Second image',
        image: require('./yourImage2.jpg'),
        thumb: require('./yourImageThumb2.jpg'),
        overlay: <OtherOverlay />
      }
    ];

    return <Gallery data={data} />;
  }
}

It is up to you to render a header, navigation bar, etc.

Props	Type	Description
backgroundColor	String	Changing the background color of gallery and pagination
data	Array of object	See Data below
initialPaginationSize	Number	Default to 10
initialNumToRender	Number	Default to 4
initialIndex	Number	Default to 0
overlay	Component	If present, a view that will be displayed above the image

Data object

Data prop an array objects that will configure slides. You can provide the following props.

Key	Type	Required	Description
id	String	Yes	A unique identifier
image	Image source	Yes	See <Image source={}/> on react native documentation.
thumb	Image source	No	Will be used as a thumbnail on pagination, will default to imageif not provided
overlay	Component	No	A view that will be displayed above the image, for metas infos for example