react-native-photo-zoom
TypeScript icon, indicating that this package has built-in type declarations

1.1.5 • Public • Published

react-native-photo-zoom

platforms npm npm github issues github closed issues Issue Stats

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

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

Package Sidebar

Install

npm i react-native-photo-zoom

Weekly Downloads

206

Version

1.1.5

License

MIT

Unpacked Size

585 kB

Total Files

66

Last publish

Collaborators

  • lunyx