Home

Awesome

Show Cases

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

All Contributors

<!-- ALL-CONTRIBUTORS-BADGE:END -->

Zoom while sliding

3.gif

Intelligent zoom

2.gif

Getting Started

Installation

npm i react-native-image-pan-zoom --save

Basic Usage

$ npm install -g create-react-native-app
$ create-react-native-app AwesomeProject
import { Image, Dimensions } from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';

export default class App extends React.Component {
    render: function() {
        return (
            <ImageZoom cropWidth={Dimensions.get('window').width}
                       cropHeight={Dimensions.get('window').height}
                       imageWidth={200}
                       imageHeight={200}>
                <Image style={{width:200, height:200}}
                       source={{uri:'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg'}}/>
            </ImageZoom>
        )
    }
}

Document

PropsTypeDescriptionDefaultValue
cropWidth(required)numberoperating area width100
cropHeight(required)numberoperating area height100
imageWidth(required)numberpicture width100
imageHeight(required)numberpicture height100
onClick(eventParams: IOnClick)=>voidonClick()=>{}
onDoubleClick(eventParams: IOnClick)=>voidonDoubleClick()=>{}
panToMovebooleanallow to move picture with one fingertrue
pinchToZoombooleanallow scale with two fingerstrue
clickDistancenumberhow many finger movement can also trigger onClick10
horizontalOuterRangeOffset(offsetX?: number)=>voidhorizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation()=>{}
onDragLeft()=>voidtrigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered()=>{}
responderRelease(vx: number)=>voidlet go but do not cancel()=>{}
maxOverflownumbermaximum sliding threshold100
longPressTimenumberlong press threshold800
onLongPress(eventParams: IOnClick)=>voidon longPress()=> {}
doubleClickIntervalnumbertime allocated for second click to be considered as doublClick event175
onMove( position: IOnMove )=>voidreports movement position data (helpful to build overlays)()=> {}
centerOn{ x: number, y: number, scale: number, duration: number }if given this will cause the map to pan and zoom to the desired locationundefined
enableSwipeDownbooleanfor enabling vertical movement if user doesn't want itfalse
enableCenterFocusbooleanfor disabling focus on image center if user doesn't want ittrue
onSwipeDown() => voidfunction that fires when user swipes downnull
swipeDownThresholdnumberthreshold for firing swipe down function230
minScalenumberminimum zoom scale0.6
maxScalenumbermaximum zoom scale10
useNativeDriverbooleanWhether to animate using useNativeDriverfalse
onStartShouldSetPanResponder() => booleanOverride onStartShouldSetPanResponder behavior() => true
onMoveShouldSetPanResponder() => booleanOverride onMoveShouldSetPanResponder behaviorundefined
onPanResponderTerminationRequest() => booleanOverride onMoveShouldSetPanResponder behavior() => false
useHardwareTextureAndroidbooleanfor disabling rendering to hardware texture on Androidtrue
MethodparamsDescription
resetReset the position and the scale of the image
resetScaleReset the scale of the image
centerOnICenterOnCenters the image in the position indicated. ICenterOn={ x: number, y: number, scale: number, duration: number }

Development pattern

Step 1, run TS listener

After clone this repo, then:

npm install
npm start

Step 2, run demo

cd demo
npm install
npm start

Then, scan the QR, use your expo app.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="http://kingdaro.net"><img src="https://avatars1.githubusercontent.com/u/19603573?v=4" width="100px;" alt=""/><br /><sub><b>Darius</b></sub></a><br /><a href="https://github.com/ascoders/react-native-image-zoom/commits?author=kingdaro" title="Code">💻</a></td> <td align="center"><a href="https://tpxp.ddns.net"><img src="https://avatars2.githubusercontent.com/u/7191841?v=4" width="100px;" alt=""/><br /><sub><b>Thomas P.</b></sub></a><br /><a href="https://github.com/ascoders/react-native-image-zoom/commits?author=TPXP" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ditorojuan"><img src="https://avatars0.githubusercontent.com/u/22530892?v=4" width="100px;" alt=""/><br /><sub><b>Juan Di Toro</b></sub></a><br /><a href="https://github.com/ascoders/react-native-image-zoom/commits?author=ditorojuan" title="Code">💻</a></td> <td align="center"><a href="https://github.com/AlhaythamElhassan"><img src="https://avatars0.githubusercontent.com/u/20684701?v=4" width="100px;" alt=""/><br /><sub><b>Alhaytham Elhassan</b></sub></a><br /><a href="https://github.com/ascoders/react-native-image-zoom/commits?author=AlhaythamElhassan" title="Code">💻</a></td> <td align="center"><a href="http://alexandrius.com"><img src="https://avatars3.githubusercontent.com/u/5978212?v=4" width="100px;" alt=""/><br /><sub><b>Alexander Pataridze</b></sub></a><br /><a href="https://github.com/ascoders/react-native-image-zoom/commits?author=alexandrius" title="Code">💻</a></td> <td align="center"><a href="https://github.com/pxpeterxu"><img src="https://avatars1.githubusercontent.com/u/2924388?v=4" width="100px;" alt=""/><br /><sub><b>Peter Xu</b></sub></a><br /><a href="https://github.com/ascoders/react-native-image-zoom/commits?author=pxpeterxu" title="Code">💻</a></td> </tr> </table> <!-- markdownlint-enable --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!