Skip to content

A pure JavaScript image gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.

Notifications You must be signed in to change notification settings

keminggu/react-native-gallery

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 

Repository files navigation

react-native-gallery

A pure JavaScript image gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.

This component aims to be (one of ) the best image viewer for react-native apps. Comparing with other gallery alike components, this one should be more elegant in following aspects: (mimics iOS system photo album app)

  • Gesture handle: besides common pan, pinch and doubleTap, this component does well in targeting foucs point( or pivot) when zoom-in and zoom-out.
  • Responder switch: the gesture responder switch is more flexible than any other component, that is, the scrollable container and the wrapped image children perform well in acquiring and releasing gesture responder from/to each other.

This component works on react-native 0.28+ and only supports remote images for now.

Install

npm install --save react-native-gallery@latest

Documentaion

Quite easy to use:

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

  render() {
    return (
      <Gallery
        style={{flex: 1, backgroundColor: 'black'}}
        images={[
          'http://p10.qhimg.com/t019e9cf51692f735be.jpg',
          'http://ww2.sinaimg.cn/mw690/714a59a7tw1dxqkkg0cwlj.jpg',
          'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg'
        ]}
      />
    );
  }

This component utilizes @ldn0x7dc/react-native-view-pager as the scrollable container and react-native-transformable-image as the wrapped image.

Props

  • images: array, contains image urls
  • initialPage, pageMargin, onPageSelected, onPageScrollStateChanged, onPageScroll: inherited from @ldn0x7dc/react-native-view-pager. Check the link for more details.
  • onSingleTapConfirmed: Called after user single taped( not a double tap)
  • onGalleryStateChanged: function. (idle) => {}.

Add your custom views above image

It's a common practice to float a comment box or like button above the image. This component provides a convenient interface to implement this feature:

  • onSingleTapConfirmed(): a good time for you to display the responding floating view.
  • onGalleryStateChanged(idle): If idle is false, it's a good time for your to hide any floating views.

Check the Demo project for a simple demonstration.

Attention

This component is being actively developed but should be ready for production realease.

If you encounter any problem that seems unnormal, just create an issue or check out the latest release.

TODO

  • Dump off-screen images for better performance if needed

About

A pure JavaScript image gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 60.2%
  • Objective-C 24.2%
  • Python 8.9%
  • Java 6.7%