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-nextWith Yarn:
yarn add react-native-photo-view-nextUsage
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 |