react-native-photo-zoom

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

• Android: PhotoDraweeView
• iOS : MWPhotobrowser, SDWebImage

Usage

import PhotoZoom from 'react-native-photo-zoom';

Basics:

<PhotoZoom
  source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
  minimumZoomScale={0.5}
  maximumZoomScale={3}
  androidScaleType="center"
  onLoad={() => console.log("Image loaded!")}
  style={{width: 300, height: 300}} />

###Compared to react-native-photo-view react-native-photo-view functionality is similar, but there are several major differencies:

• PhotoZoom used SDWebImage (Fast)
• New version of MWPhotobrowser

Properties

| Property | Type | Description | |-----------------|----------|--------------------------------------------------------------| | source | Object, number | same as source for other React images | | loadingIndicatorSource | Object | source for loading indicator | | fadeDuration | number | duration of image fade (in ms) | | minimumZoomScale | number | The minimum allowed zoom scale. The default value is 1.0 | | maximumZoomScale | number | The maximum allowed zoom scale. The default value is 3.0 | | showsHorizontalScrollIndicator | boolean | iOS only: When true, shows a horizontal scroll indicator. The default value is true. | | showsVerticalScrollIndicator | boolean | iOS only: When true, shows a vertical scroll indicator. The default value is true. | | scale | number | Set zoom scale programmatically | androidZoomTransitionDuration | number | 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 | function | Callback function | | onLoad | function | Callback function | | onLoadEnd | function | Callback function | | onProgress | function | iOS only: Callback function, invoked on download progress with {nativeEvent: {loaded, total}}. | | onTap | function | Callback function (called on image tap) | | onViewTap | function | Callback function (called on tap outside of image) | | onScale | function | Callback function |

Automatic installation

Just simple steps:

npm install --save react-native-photo-zoom

Link ( RN <= 0.59 )

react-native link react-native-photo-zoom