Skip to content

Simple, yet powerful image gallery for React Native. Features zoom and pagination ! 🖼

License

Notifications You must be signed in to change notification settings

Horsha/react-native-photo-gallery

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-photo-gallery

Demo image

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
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 The same as the source prop on <Image />.
thumb Image source No Will be used as a thumbnail on pagination, will default to image if not provided
overlay Component No A view that will be displayed above the image, for metas infos for example

About

Simple, yet powerful image gallery for React Native. Features zoom and pagination ! 🖼

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%