Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fakeheal/react-native-pan-pinch-view
🔍 A view component for React Native with pinch to zoom and drag to pan functionality.
https://github.com/fakeheal/react-native-pan-pinch-view
android ios react-native react-native-component zoom
Last synced: 18 days ago
JSON representation
🔍 A view component for React Native with pinch to zoom and drag to pan functionality.
- Host: GitHub
- URL: https://github.com/fakeheal/react-native-pan-pinch-view
- Owner: fakeheal
- License: mit
- Created: 2022-01-17T15:57:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-07T19:48:35.000Z (9 months ago)
- Last Synced: 2024-10-11T09:46:28.551Z (about 1 month ago)
- Topics: android, ios, react-native, react-native-component, zoom
- Language: TypeScript
- Homepage:
- Size: 11.8 MB
- Stars: 77
- Watchers: 5
- Forks: 13
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-pan-pinch-view
A view component for React Native with pinch to zoom and drag to pan functionality.
## 👋 Introduction
Even though the demo shows the library used with images, it was initially designed to show ``s representing blueprints of rooms.
- Pinch to zoom with two fingers
- Drag one finger to pan
- Keep content inside container boundaries
- Configurable minimum and maximum scale
- Methods for programmatically updating position and scale
Thanks to `react-native-reanimated` all animations are running on the UI thread, so no fps drops are experienced.
If you want to zoom in on images *exclusively*, in a gallery-like UI, I recommend these packages, rather than my library:
- [`react-native-awesome-gallery`](https://github.com/Flair-Dev/react-native-awesome-gallery)
- [`react-native-image-zoom`](https://github.com/likashefqet/react-native-image-zoom)
## 👀 Prerequisites
This library uses `react-native-reanimated` v3 and the latest API of `react-native-gesture-handler`.
Before installing it, you need to install those two libraries and set them up in your project:
- `[email protected]`: [installation & setup](https://docs.swmansion.com/react-native-reanimated/)
- `[email protected]`: [installation & setup](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation)
## ⚙️ Installation
```sh
npm install react-native-pan-pinch-view
```
## ✂️ Usage
```js
import PanPinchView from "react-native-pan-pinch-view";
// ...
const CONTAINER = {
width: 300,
height: 300,
};
const CONTENT = {
width: 900,
height: 400,
};
// ...
// ...
const styles = StyleSheet.create({
image: {
width: CONTENT.width,
height: CONTENT.height,
},
});
```
## ⚪ Props
| Property | Type | Default | Description |
|-----------------------|-----------|----------------------------------|--------------------------------------------------------------------------------------------------------------------|
| containerDimensions | Object | `{width: number, height:number}` | Width and height of the viewable area. |
| contentDimensions | Object | `{width: number, height:number}` | Width and height of the zoomable view. |
| minScale | Number? | `0.5` | Minimum value of scale. |
| maxScale | Number? | `4` | Maximum value of scale. |
| initialScale | Number? | `1` | Initial value of scale. |
| onTranslationFinished | Function? | `undefined` | Function to be called on the JS thread with an object containing current position and whether it was clamped (X/Y) |
## 🛠 Methods
| Method | Params | Return | Description |
|----------------|-----------------------------------------|--------|----------------------------------------------------------------------------------------------|
| scaleTo | value: number, animated: boolean | void | Sets sharedValue `scale` to `value`,
if `animated` is **true** uses `withTiming` |
| setContentSize | width: number, height: number | void | Updates sharedValue `contentSize` and overrides prop: `contentDimensions` |
| translateTo | x: number, y: number, animated: boolean | void | Updates content `translateX` / `translateY`,
if `animated` is **true** uses `withTiming` |
| setMinScale | value: number | void | Updates `minScale` value |
| setMaxScale | value: number | void | Updates `maxScale` value |
| getScale | | number | Returns current value of sharedValue `scale` |
You can also refer to the app inside `example/` for a running demo of this library.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT