react-native-image-gallery

Table of contents

• react-native-image-gallery
  • Table of contents
  • Install
  • Usage example
  • Remote and local images
  • Props
  • Scroll state and events

>This used to be a fork of ldn0x7dc/react-native-gallery but the original repo is no longer maintained, so here's our own repo. Props to ldn0x7dc for his amazing work! 👏👏👏

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 the best image viewer for React Native apps, it is far more elegant than other gallery-like components as it features some of the most useful functionalities found in the iOS photo album app such as:

• Gesture handling - other than the common pan, pinch and doubleTap gestures, this component also performs efficiently when targeting focus point (also known as pivot) on zoom-in and zoom-out.
• Responder switch - the gesture responder switch is far 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 utilizes @ldn0x7dc/react-native-view-pager as the scrollable container and react-native-transformable-image as the wrapped image.

This component works on react-native 0.44+.

You can try this example live in Archriss' showcase app on Android and iOS or check out the demo.

Install

npm install --save react-native-image-gallery or yarn add react-native-image-gallery

Usage example

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

  render() {
    return (
      
    );
  }

Remote and local images

This component supports both remote images by specifying source.uri, and local images where source is the result of require().

Be aware that the width and height must be defined for local images, but is not required for remote images! Although the dimensions could still be provided for remote images to save the gallery from fetching them, which could potentially improve performance.

Props