Package Exports
- react-native-photo-view-next
- react-native-photo-view-next/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-photo-view-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 |