Home

Awesome

react-native-zoom-image

ZoomImage component for React Native Application (ios / android)

Only works with https network images [With the limitation of the current react-native, we can't get original size of required images. This component just zooms them with given size (provided by imgStyle prop)]

If you need to support http network images, modify info.plist please :)

Examples

<a href="#android" id="android"><img src="./GIF/android.gif" align="left" width="240"/></a>

<a href="#ios" id="ios"><img src="./GIF/ios.gif" width="240"/></a>

Usage

install from npm

npm install --save react-native-zoom-image

import in project

import ZoomImage from 'react-native-zoom-image';
import {Easing} from 'react-native'; // import Easing if you want to customize easing function
let styles = {
  img: {} // custom styles of original image component
};
// in render function
<ZoomImage
  source={{uri: 'https://ooo.0o0.ooo/2017/03/31/58de0e9b287f6.jpg'}}
  imgStyle={{width: 250, height: 230}}
  style={styles.img}
  duration={200}
  enableScaling={false}
  easingFunc={Easing.ease}
/>

Properties

PropTypeDefaultDescription
disabledboolfalseWhether to disable the component or not.
startCaptureboolfalseWhether to capture start touch event or not.
moveCaptureboolfalseWhether to capture move event or not.
responderNegotiatefunction-Use custom conditions to enable or disable gesture over image modal.
easingFuncfunctionEasing.linearThe easing function of animation.
showDurationnumber100The duration of showing the image modal.
closeDurationnumber140The duration of closing the image modal.
rebounceDurationnumber800The total duration of resetting the position of image. The actual duration changes by the displacement of the image in Y-axis. If the displacement equals to the height of screen, the duration shall be 800ms.
enableScalingboolfalseWhether to scale the image when it is polled.

Instance methods

MethodParamsDescription
openModal-Open image modal
closeModal-Close image modal.

LICENSE MIT