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

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

You can use the react-native-reanimated library along with react-native-gesture-handler to handle gestures. First, install both libraries.

What are the basic gestures I can implement?

You can implement gestures like tap, pan, pinch, and swipe. Each gesture has its own handler that you can customize.

Can you show me a simple example of a swipe gesture?

Sure! Here's a basic example:

import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';

const SwipeExample = () => {
  const gestureHandler = useAnimatedGestureHandler({
    onActive: (event) => {
      console.log('Swiping!', event.translationX);
    },
  });

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

This will log the swipe translation as you swipe.

What if I want to combine multiple gestures?

You can use the GestureDetector component to combine multiple gestures. Just wrap your components with it and define the gestures you want to recognize.