Performant Image Zoom Component Based On Reanimated


A modern and high performance React Native image zoom component based on the Reanimated v2.


  • Zoom (pinch and/or pan) the image using gestures.
  • Reset zoom and snap back to initial position on gesture end.
  • Smooth gesture interactions & snapping animations.
  • Loading state while the image is loading.
  • Customize the default loader.
  • Provide custom loader to override/remove the default one.
  • Configure maximum zoom value.
  • Written in┬áTypeScript.

How to use it:

1. Install and import the image zoom component.

# Yarn
$ yarn add @likashefqet/react-native-image-zoom
$ npm i @likashefqet/react-native-image-zoom
import { ImageZoom } from '@likashefqet/react-native-image-zoom';

2. Add the component to the app.

<ImageZoom uri={imageUri} />

3. Available component props.

uri = '',
minScale = 1,
maxScale = 5,
containerStyle = {},
imageContainerStyle = {},
activityIndicatorProps = {},


Performant Image Zoom Component Based On Reanimated

Add Comment