Package Exports
- @dailyy-app/react-native-image-zoom
- @dailyy-app/react-native-image-zoom/src/index.ts
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@dailyy-app/react-native-image-zoom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Native Image Zoom
A performant zoomable image written in 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 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.
Getting Started
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.
Usage
import { ImageZoom } from '@likashefqet/react-native-image-zoom';Basics:
<ImageZoom uri={imageUri} />Properties
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. |
Changelog
Read the changelog.
Author
 Shefqet Lika 💻 |
Support
If you are looking for a private support or help in customizing the experience, then reach out to me by email @likashefi.