React-Native 드래그앤 드롭 FlatList 만들기(react-native-draggable-flatlist)

프로젝트 진행하면서 드래그앤 드롭으로 리스트의 순서를 바꿔줘야하는 부분이 필요했고 서칭을 통해react-native-draggable-flatlist 라이브러리를 사용하여 드래그앤 드롭을 해 주었다.

코드는 이러하다.

import DraggableFlatList, {
  ScaleDecorator,
} from 'react-native-draggable-flatlist';
...
 const DraggList = gestureHandlerRootHOC(() => (
    <View>
      <DraggableFlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item, idx) => idx}
        onDragEnd={({ data }) => {
          setData(data), setTotalData({ ...totalData, musics: data });
        }}
      />
    </View>
  ));

  const renderItem = gestureHandlerRootHOC(({ item, drag, isActive }) => {
    return (
      <ScaleDecorator>
          <View style={styles.box}>
            <TouchableOpacity
              activeOpacity={1}
              onLongPress={drag}
              disabled={isActive}
            >
              <View>
                <Text style={{ fontSize: 30, color: 'black' }}>= </Text>
              </View>
            </TouchableOpacity>
            <Pressable>
              <Text>{item?.title}</Text>
              <Text style={styles.artist}>UNKNOWN</Text>
            </Pressable>
          </View>
      </ScaleDecorator>
    );
  });
...
return(
   <View style={{ height: '90%' }}>
        <DraggList />
      </View>
  )

TouchableOpacity 의 onLongPress 에 함수를 붙여 길게 클릭했을때 리스트가 움직일 수있게 해준다. 그리고 onDragEnd 내장 함수로 데이터 모양을 변경하게 해주면 원하는 모양의 드래그앤 드롭 리스트 설정이 가능해진다.

++Android에서는 gestureHandlerRootHOC로 감싸주지 않으면 작동하지 않는다!