Pinch to Zoom Gesture

Author

Spencer Carli

Developer, cat dad, and devout pizza lover. Teaching at React Native School and building apps with Handlebar Labs.

Last Updated: April 24, 2019

Libraries Used

Final Code

App.js

import React from 'react';
import { StyleSheet, Text, View, Animated, Dimensions } from 'react-native';
// import GestureHandler, { PinchGestureHandler } from 'react-native-gesture-handler';
import { GestureHandler } from 'expo';
const { PinchGestureHandler } = GestureHandler;

const screen = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: screen.width,
    height: screen.width,
  },
});

export default class App extends React.Component {
  scale = new Animated.Value(1);

  onPinchEvent = Animated.event([{ nativeEvent: { scale: this.scale } }], {
    useNativeDriver: true,
  });

  onPinchStateChange = (event) => {
    if (event.nativeEvent.oldState === GestureHandler.State.ACTIVE) {
      Animated.spring(this.scale, {
        toValue: 1,
        useNativeDriver: true,
        bounciness: 1,
      }).start();
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <PinchGestureHandler
          onGestureEvent={this.onPinchEvent}
          onHandlerStateChange={this.onPinchStateChange}
        >
          <Animated.Image
            source={{
              uri:
                'https://images.pexels.com/photos/2147459/pexels-photo-2147459.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
            }}
            style={[
              styles.image,
              {
                transform: [{ scale: this.scale }],
              },
            ]}
            resizeMode="contain"
          />
        </PinchGestureHandler>
      </View>
    );
  }
}
React Native School Logo

React Native School

Want to further level up as a React Native developer? Join React Native School! You'll get access to all of our classes and our private Slack community.