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 |