React Native Animation Tutorial Series (Part 10): How to Create Click and Drag Animation in React Native

Last Updated on December 15, 2020.

This is the tenth part of react native animation tutorial series. Here, how to create a drag animation in react native. What I really mean is – a click and drag animation where the user can hold, drag and drop the view anywhere on the screen.

We are trying to create the following output.

We use two APIs from React Native namely Animated and PanResponder to achieve the desired output. I already discussed the Animated API in the previous animation tutorials. PanResponder is used to manage multiple touch gestures.

First of all, set a new x and y values using Animated API.

this.state = {
      pan: new Animated.ValueXY(),
    };

Next, we create a new PanResponder instance.

this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        this.state.pan.setOffset(this.state.pan.__getValue());
        this.state.pan.setValue({x: 0, y: 0});
      },
      onPanResponderMove: Animated.event([
        null,
        {dx: this.state.pan.x, dy: this.state.pan.y},
      ]),
    });

We set onStartShouldSetPanResponder true and make the initial position of the view center by assigning x =0 and y=0 using onPanResponderGrant. We change the positions of the View using onPanResponderMove.

Using the newly created panResponder we can transform the positions of the circle.

<Animated.View
          {...this.panResponder.panHandlers}
          style={[
            styles.circle,
            {
              transform: [
                {translateX: this.state.pan.x},
                {translateY: this.state.pan.y},
              ],
            },
          ]}
        />

Following is the complete react native pan responder animation example.

import React, {Component} from 'react';
import {PanResponder, View, Animated, StyleSheet} from 'react-native';

export default class Drag extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pan: new Animated.ValueXY(),
    };
    // Initialize PanResponder
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        this.state.pan.setOffset(this.state.pan.__getValue());
        this.state.pan.setValue({x: 0, y: 0});
      },
      onPanResponderMove: Animated.event(
        [null, {dx: this.state.pan.x, dy: this.state.pan.y}],
        {useNativeDriver: false},
      ),
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          {...this.panResponder.panHandlers}
          style={[
            styles.circle,
            {
              transform: [
                {translateX: this.state.pan.x},
                {translateY: this.state.pan.y},
              ],
            },
          ]}
        />
      </View>
    );
  }
}

let styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circle: {
    backgroundColor: 'red',
    width: 60,
    height: 60,
    borderRadius: 30,
  },
});

I hope this react native drag animation tutorial will help you.

1 thought on “React Native Animation Tutorial Series (Part 10): How to Create Click and Drag Animation in React Native”

Leave a Reply

%d bloggers like this: