Performant Image Zoom Component Based On Reanimated

Description:

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: