
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:
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
Credit: Source link