How can I implement gesture handling in my React Native app using Reanimated?

How can I implement gesture handling in my React Native app using Reanimated?

You can use the PanGestureHandler from the react-native-gesture-handler library along with Reanimated to handle gestures.

Can you provide a code example for a simple drag gesture?

Sure! Here's a basic example:

import React from 'react';
import { View } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

const DraggableBox = () => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }, { translateY: translateY.value }],
    };
  });

  const onGestureEvent = (event) => {
    translateX.value = event.translationX;
    translateY.value = event.translationY;
  };

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <Animated.View style={[animatedStyle, { width: 100, height: 100, backgroundColor: 'blue' }]} />
    </PanGestureHandler>
  );
};

This code creates a draggable blue box.

What if I want to add a bounce effect when I release the box?

You can achieve a bounce effect by using the withSpring function from Reanimated. Modify the onEnd event of the gesture handler to include this effect.