react-native-photo-view-next

View and Zoom images for React Native

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