- 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 image is loading.
- Customize the default loader.
- Provide custom loader to override/remove the default one.
- Configure maximum zoom value.
- Compatible with
Reanimated v2. - Written in
TypeScript.
npm install @likashefqet/react-native-image-zoom
or yarn add @likashefqet/react-native-image-zoom
This library been written in React Native Reanimated v2, make sure to follow installation instructions if you haven't installed Reanimated yet.
This library uses React Native Gesture Handler, make sure to follow installation instructions if you haven't installed Gesture Handler yet.
import { ImageZoom } from '@likashefqet/react-native-image-zoom';Basics:
<ImageZoom uri={imageUri} />All React Native Image Props &
| Property | Type | Default | Description |
|---|---|---|---|
| uri | String | '' (empty string) |
Image uri. Can be overridden by source prop. |
| minScale | Number | 1 |
The minimum allowed zoom scale. |
| maxScale | Number | 5 |
The maximum allowed zoom scale. |
| containerStyle | Object | {} |
Style object to be applied to the container. |
| imageContainerStyle | Object | {} |
Style object to be applied to the image container. |
| activityIndicatorProps | Object | {} |
Activity Indicator Props to customize the default loader. |
| renderLoader | Function | undefined |
Function that renders a custom loading component. Render null to disable loader. |
Read the changelog.
 Shefqet Lika 💻 |
If you are looking for a private support or help in customizing the experience, then reach out to me by email @likashefi.