How can I implement gesture handling in React Native using the Animated API?

How can I implement gesture handling in React Native using the Animated API?

You can use the PanResponder from React Native to handle gestures. Combine it with the Animated API to create smooth animations.

Can you provide a code example for a simple drag-and-drop feature?

Sure! 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;

What if I want to add more animations when the box is dropped?

You can modify the onPanResponderRelease method to include additional animations, like scaling or rotating the box.