App.tsx

import React, {FC, PropsWithChildren, useRef, useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  PanResponder,
  Animated,
  SafeAreaView,
} from 'react-native';

type Item = {
  id: string;
  color: string;
};

const ITEMS: Item[] = [
  {id: '1', color: '#FF5733'},
  {id: '2', color: '#33FF57'},
  {id: '3', color: '#3357FF'},
  {id: '4', color: '#FF33A1'},
  {id: '5', color: '#FF8C33'},
  {id: '6', color: '#33FFA1'},
  {id: '7', color: '#A133FF'},
  {id: '8', color: '#FF33D4'},
  {id: '9', color: '#33FF8C'},
  {id: '10', color: '#8C33FF'},
  {id: '11', color: '#FF338C'},
  {id: '12', color: '#33FF57'},
  {id: '13', color: '#FF5733'},
  {id: '14', color: '#33FF57'},
  {id: '15', color: '#3357FF'},
  {id: '16', color: '#FF33A1'},
  {id: '17', color: '#FF8C33'},
  {id: '18', color: '#33FFA1'},
  {id: '19', color: '#A133FF'},
  {id: '20', color: '#FF33D4'},
];

// Moves array item immutably
function immutableMove(arr: any[], from: number, to: number) {
  /* eslint-disable curly */
  return arr.reduce((prev, current, idx, self) => {
    if (from === to) prev.push(current);
    if (idx === from) return prev;
    if (from < to) prev.push(current);
    if (idx === to) prev.push(self[from]);
    if (from > to) prev.push(current);
    return prev;
  }, []);
}

const DragAndDropFlatList: FC<PropsWithChildren<{items: Item[]}>> = ({
  items = ITEMS,
}) => {
  // Component state
  const [state, setState] = useState(() => ({
    dragging: false,
    draggingIdx: -1,
    data: items,
  }));

  // Refs for tracking
  const point = useRef(new Animated.ValueXY()).current; // Drag position
  const flatList = useRef<FlatList>(null); // FlatList reference
  const currentY = useRef(0); // Current touch Y
  const scrollOffset = useRef(0); // Scroll position
  const flatListTopOffset = useRef(0); // List top position
  const rowHeight = useRef(0); // Item height
  const currentIdx = useRef(-1); // Current dragged index
  const active = useRef(false); // Drag active flag
  const flatListHeight = useRef(0); // List height

  // Animation loop for dragging
  const animateList = () => {
    if (!active.current) {
      return;
    }

    requestAnimationFrame(() => {
      // Auto-scroll near edges
      if (currentY.current + 100 > flatListHeight.current) {
        flatList.current?.scrollToOffset({
          offset: scrollOffset.current + 20,
          animated: false,
        });
      } else if (currentY.current < 100) {
        flatList.current?.scrollToOffset({
          offset: scrollOffset.current - 20,
          animated: false,
        });
      }

      // Reorder if needed
      const newIdx = yToIndex(currentY.current);
      if (currentIdx.current !== newIdx) {
        setState(prev => ({
          ...prev,
          data: immutableMove(prev.data, prev.draggingIdx, newIdx),
          draggingIdx: newIdx,
        }));
        currentIdx.current = newIdx;
      }
      animateList();
    });
  };

  // Convert Y position to index
  const yToIndex = (y: number) => {
    const value = Math.floor(
      (scrollOffset.current + y - flatListTopOffset.current) /
        rowHeight.current,
    );
    if (value < 0) return 0;
    if (value > state.data.length - 1) return state.data.length - 1;
    return value;
  };

  // Reset drag state
  const reset = () => {
    active.current = false;
    setState(prev => ({...prev, dragging: false, draggingIdx: -1}));
  };

  // Drag handlers
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onStartShouldSetPanResponderCapture: () => true,
      onMoveShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderGrant: (evt, gestureState) => {
        currentIdx.current = yToIndex(gestureState.y0);
        currentY.current = gestureState.y0;
        Animated.event([{y: point.y}], {useNativeDriver: false})({
          y: gestureState.y0 - rowHeight.current / 2,
        });
        active.current = true;
        setState(prev => ({
          ...prev,
          dragging: true,
          draggingIdx: currentIdx.current,
        }));
        animateList();
      },
      onPanResponderMove: (evt, gestureState) => {
        currentY.current = gestureState.moveY;
        Animated.event([{y: point.y}], {useNativeDriver: false})({
          y: gestureState.moveY,
        });
      },
      onPanResponderTerminationRequest: () => false,
      onPanResponderRelease: () => reset(),
      onPanResponderTerminate: () => reset(),
      onShouldBlockNativeResponder: () => true,
    }),
  ).current;

  // Item renderer
  const renderItem = (
    {item, index}: {item: Item; index: number},
    noPanResponder = false,
  ) => (
    <View
      onLayout={e => {
        rowHeight.current = e.nativeEvent.layout.height;
      }}
      style={[
        styles.item,
        /* eslint-disable react-native/no-inline-styles */
        {
          backgroundColor: item.color,
          opacity: state.draggingIdx === index ? 0 : 1,
        },
      ]}>
      <View {...(noPanResponder ? {} : panResponder.panHandlers)}>
        <Text style={{fontSize: 28}}>@</Text>
      </View>
      <Text style={{fontSize: 22, textAlign: 'center', flex: 1}}>
        {item.id}
      </Text>
    </View>
  );

  // Main render
  return (
    <SafeAreaView style={styles.container}>
      {state.dragging && (
        <Animated.View
          style={[
            styles.animatedContainer,
            {
              top: point.getLayout().top,
            },
          ]}>
          {renderItem({item: state.data[state.draggingIdx], index: -1}, true)}
        </Animated.View>
      )}
      <FlatList
        ref={flatList}
        keyExtractor={item => item.id}
        scrollEnabled={!state.dragging}
        style={styles.list}
        data={state.data}
        renderItem={renderItem}
        onScroll={e => {
          scrollOffset.current = e.nativeEvent.contentOffset.y;
        }}
        onLayout={e => {
          flatListTopOffset.current = e.nativeEvent.layout.y;
          flatListHeight.current = e.nativeEvent.layout.height;
        }}
        scrollEventThrottle={16}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  animatedContainer: {
    position: 'absolute',
    backgroundColor: 'black',
    zIndex: 2,
    width: '100%',
  },
  list: {
    width: '100%',
  },
  item: {
    padding: 16,
    flexDirection: 'row',
  },
});

export default DragAndDropFlatList;