react-native-pan-pinch

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 {
    
       state = {
           dimensions: [],
       }
    
       handleLayout(ev) {
           const {width, height} = ev.nativeEvent.layout;
           this.setState({ dimensions: [width, height] });
       }
    
       render() {
           return (
               { /* In this case, we want this view to serve as the boundaries for Box. Therefore
                    we have to view its layout change and update containerDimensions on PanPinch
                    accordingly */ }
               <View
                   style={styles.container}
                   onLayout={(ev) => this.handleLayout(ev)}
               >
                   <PanPinch containerDimensions={this.state.dimensions}>
                       <Box />
                   </PanPinch>
               </View>
           );
       }
    
   }
    
   const styles = StyleSheet.create({
       container: {
           width: '80%',
           height: '80%'
       },
   });

API

Props

• containerDimensions: Takes an array of 2 numbers (width and height of the boundaries in which the PanPinch's content can move), e.g. [200, 400] if we want to restrict x pan to 200 and y pan to 400 px.

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.