1.1.5 • Published 2 years ago
react-native-photo-zoom v1.1.5
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-zoomLink ( RN <= 0.59 )
react-native link react-native-photo-zoom