0.0.2 • Published 4 years ago

rnpg v0.0.2

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

react-native-photo-gallery

Forked from https://github.com/FidMe/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 rnpg --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 'rnpg';

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.

PropsTypeDescription
backgroundColorStringChanging the background color of gallery and pagination
dataArray of objectSee Data below
initialPaginationSizeNumberDefault to 10
initialNumToRenderNumberDefault to 4
initialIndexNumberDefault to 0
overlayComponentIf 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.

KeyTypeRequiredDescription
idStringYesA unique identifier
imageImage sourceYesSee <Image source={}/> on react native documentation.
thumbImage sourceNoWill be used as a thumbnail on pagination, will default to imageif not provided
overlayComponentNoA view that will be displayed above the image, for metas infos for example