README
Zoomable Image
A simple ZoomableImage
component for React Native
Installation
npm i --save react-native-zoomable-image
Usage
Add the ZoomableImage
component anywhere you'd usually put an Image
. The only required attribute is source
, which supports any value accepted by the React Native image
component's source
attribute.
The optional maxZoom
attribute can be used to limit the maximum zoom level of the image, relative to the image's native resolution. It defaults to 3
.
<ZoomableImage
source={{ uri: '' }}
maxZoom={2} />
By default, the component allows the images to scale outside of the component. If you want images to be clipped to the ZoomableImage
component's bounding box, add style={{ overflow: 'hidden' }}
.
Multiple images
The ZoomableImage
component avoids intercepting unnecessary gestures, so it can be included directly within in e.g. a ScrollView
or ViewPagerAndroid
component should will just work. Just create a new instance of the component for each image you want to display, and position each wherever you'd like the images to display.
Demo
Spring into action with an Expo Snack, demonstrating the component in a ScrollView
.