This project is the next generate of react-native-photo-view. Provides custom Image view for React Native that allows to perform pinch-to-zoom on images. Works on both iOS and Android.

This component uses PhotoDraweeView for Android and MWPhotobrowser on iOS.

Installation

With npm:

npm install react-native-photo-view-next

With Yarn:

yarn add react-native-photo-view-next

Usage

import PhotoView from 'react-native-photo-view-next';

Basics:

<PhotoView
  source={{uri: 'https://reactjs.org/logo-og.png'}}
  minimumZoomScale={0.5}
  maximumZoomScale={3}
  androidScaleType="center"
  onLoad={() => console.log("Image loaded!")}
  style={{width: 300, height: 300}} />

Properties

| Property | Type | Description | |-----------------|----------|--------------------------------------------------------------| | source | Object | same as source for other React images | | loadingIndicatorSource | Object | source for loading indicator | | fadeDuration | int | duration of image fade (in ms) | | minimumZoomScale | float | The minimum allowed zoom scale. The default value is 1.0 | | maximumZoomScale | float | The maximum allowed zoom scale. The default value is 3.0 | | showsHorizontalScrollIndicator | bool | iOS only: When true, shows a horizontal scroll indicator. The default value is true. | | showsVerticalScrollIndicator | bool | iOS only: When true, shows a vertical scroll indicator. The default value is true. | | scale | float | Set zoom scale programmatically | androidZoomTransitionDuration | int | Android only: Double-tap zoom transition duration | | androidScaleType | String | Android only: One of the default Android scale types: "center", "centerCrop", "centerInside", "fitCenter", "fitStart", "fitEnd", "fitXY" | | onLoadStart | func | Callback function | | onLoad | func | Callback function | | onLoadEnd | func | Callback function | | onProgress | func | iOS only: Callback function, invoked on download progress with {nativeEvent: {loaded, total}}. | | onTap | func | Callback function (called on image tap) | | onViewTap | func | Callback function (called on tap outside of image) | | onScale | func | Callback function |