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 <View>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.
AFAIK, Expo users should be able to use it once Expo updates to
[email protected].
If you want to zoom in on images exclusively, in a gallery-like UI, I recommend these packages, rather than my library:
👀
Prerequisites
This library uses react-native-reanimated v2 and the new API of react-native-gesture-handler.
Before installing it, you need to install those two libraries and set them up in your project:
react-native-reanimated: Installation & Setupreact-native-gesture-handler: Installation & Setup
⚙️
Installation
npm install react-native-pan-pinch-view
✂️
Usage
import PanPinchView from "react-native-pan-pinch-view";
// ...
const CONTAINER = {
width: 300,
height: 300,
};
const CONTENT = {
width: 900,
height: 400,
};
// ...
<PanPinchView
minScale={1}
initialScale={1}
containerDimensions={{
width: CONTAINER.width,
height: CONTAINER.height,
}}
contentDimensions={{ width: CONTENT.width, height: CONTENT.height }}
>
<Image
style={[styles.image]}
source={require('./assets/photo.jpg')}
/>
</PanPinchView>
// ...
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. |
🛠
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 to learn how to contribute to the repository and the development workflow.
License
MIT
129 Nov 21, 2022
11 Dec 17, 2022
391 Dec 29, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2.6k Jan 9, 2023
4 Jul 6, 2022
70 Dec 15, 2022
6 Nov 4, 2022