Intro

This is a pan and pinch component for React Native that

• handles touch inputs (zooming and panning)
• limits panning and zooming to boundaries (min and max movements on x and y axis, min and max zoom levels) and
• sets all required attributes on children to transform them correspondingly.

Prerequisites

• Your React Native setup must be linked to React Native Reanimated.
• If you use an up-to-date version of Expo, React Native Reanimated is preinstalled and already linked.

Usage

1. Create a child element that will be transformed:

   // Box.js
   import React from 'react';
   import { StyleSheet } from 'react-native';
   import Animated from 'react-native-reanimated';
   
   export default class Box extends React.Component {
   
       render() {
           return (
                <Animated.View 
                   style={[styles.box, {
                       // props.animatedLeft, props.animatedTop and props.animatedZoom were added
                       // to this component by PanPinch. They are all of type Animated.Node.
                       transform: [{
                           translateX: this.props.animatedLeft,
                       }, {
                           translateY: this.props.animatedTop,
                       }, {
                           scale: this.props.animatedZoom,
                       }],
                   }]}
               />
           );
       }
   
   }
   
   const styles = StyleSheet.create({
       box: {
           backgroundColor: "tomato",
           width: 200,
           height: 200,
       },
   });
   

2. Create a parent component that renders PanPinch and children you'd like to transform.

   // App.js
   
   import React from 'react';
   import PanPinch from 'react-native-pan-pinch';
   import { StyleSheet, View } from 'react-native';
   import Box from './Box';
   
   export default class App extends React.Component {
   
       render() {
           return (
               <View style={styles.container}>
                   <PanPinch>
                       <Box />
                   </PanPinch>
               </View>
           );
       }
   
   }
   
   const styles = StyleSheet.create({
       container: {
           flex: 1,
       },
   });

Limitations

• Boundaries cannot yet be set; will be added as soon as Expo uses a newer version of React Native Reanimated (setValue doesn't work yet).
• Zoom level is not yet respected for movement boundaries on x and y axis.