How can I implement gestures in my React Native app using the Animated API?

How can I implement gestures in my React Native app using the Animated API?

You can use the Animated API along with the PanResponder to handle gestures in your React Native app. Would you like a code example?

Yes, please provide a code example for a simple drag gesture.

Here's a basic example:

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

const DraggableBox = () => {
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null,
        { dx: pan.x, dy: pan.y },
      ], { useNativeDriver: false }),
      onPanResponderRelease: () => {
        Animated.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver: false }).start();
      },
    })
  ).current;

  return (
    <Animated.View
      {...panResponder.panHandlers}
      style={[pan.getLayout(), { width: 100, height: 100, backgroundColor: 'blue' }]}
    />
  );
};

export default DraggableBox;

This code creates a draggable blue box.

That looks great! How can I add more gestures like pinch or rotate?

For pinch and rotate gestures, you can use the react-native-gesture-handler library, which provides more advanced gesture handling. Would you like to see an example?