https://github.com/ldn0x7dc/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.
https://github.com/ldn0x7dc/react-native-gallery

Last synced: 25 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ldn0x7dc/react-native-gallery
• Owner: ldn0x7dc
• Created: 2016-06-28T04:28:25.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-23T23:17:27.000Z (over 6 years ago)
• Last Synced: 2024-11-06T23:03:54.251Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 11.1 MB
• Stars: 331
• Watchers: 7
• Forks: 116
• Open Issues: 42
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.

![](Demo/demo.gif)

## Install

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

## Documentaion

Quite easy to use:

```

import Gallery from 'react-native-gallery';

...

  render() {

    return (

      

    );

  }

```

This component utilizes **[@ldn0x7dc/react-native-view-pager](https://github.com/ldn0x7dc/react-native-view-pager)** as the scrollable container and **[react-native-transformable-image](https://github.com/ldn0x7dc/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](https://github.com/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