A simple Zoomable Image component for React Native

Usage no npm install needed!

<script type="module">
  import alanaktionReactNativeZoomableImage from 'https://cdn.skypack.dev/@alanaktion/react-native-zoomable-image';


Zoomable Image

A simple ZoomableImage component for React Native


npm i --save react-native-zoomable-image


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.

    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.


Spring into action with an Expo Snack, demonstrating the component in a ScrollView.