0.2.7 • Published 5 years ago
@arlenwang/react-native-photo-gallery v0.2.7
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 |