How can I implement drag and drop in React Native?

How can I implement drag and drop in React Native?

You can use the 'react-native-draggable' library or the built-in PanResponder for drag and drop functionality.

Can you show me a simple example using PanResponder?

Sure! Here's a basic example:

import React, { useRef } from 'react';
import { View, PanResponder, StyleSheet } 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(), styles.box]} />
  );
};

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

This creates a draggable blue box!

What if I want to implement it for a list of items?

You can use the same PanResponder approach but apply it to each item in your list. You may also want to manage the state of the list to reorder items on drag.