Performant Image Zoom Component Based On Reanimated

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

Features:

  • 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
$ 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 = {},
renderLoader

Preview:

Performant Image Zoom Component Based On Reanimated

Download Details:

Author: likashefqet

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/likashefqet/react-native-image-zoom

License: MIT

You Might Be Interested In:

Add Comment