React-native-pan-pinch-view NPM

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.

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 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:

react-native-reanimated: installation & setup
react-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.
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`