nnnnnoel / react-native-photo-zoom

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