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