[React Native] Draggable FlatList

React 목록

프로젝트 생성

$ npx react-native init dragableList --template react-native-template-typescript

 

 

React Native Reanimated 설치

$ npm install --save react-native-reanimated

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

plugins에 react-native-reaminated/plugin을 추가합니다.

 

 

react-native-gesture-handler 설치

$ npm install --save react-native-gesture-handler

 

 

 

react-native-draggable-flatlist 설치

$ npm install --save react-native-draggable-flatlist

 

 

 

 

App.tsx

import React, {useState} from 'react';
import {Text, StyleSheet, TouchableOpacity} from 'react-native';
import DraggableFlatList, {
  ScaleDecorator,
  RenderItemParams,
} from 'react-native-draggable-flatlist';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

export default function Basic() {
  const initialData = [
    {
      text: '1',
      key: '1',
    },
    {
      text: '2',
      key: '2',
    },
    {
      text: '3',
      key: '3',
    },
  ];
  const [data, setData] = useState(initialData);

  const renderItem = ({item, drag, isActive}: RenderItemParams<any>) => {
    return (
      <ScaleDecorator>
        <TouchableOpacity
          activeOpacity={1}
          onLongPress={drag}
          disabled={isActive}
          style={[
            styles.rowItem,
            {backgroundColor: isActive ? 'red' : item.backgroundColor},
          ]}>
          <Text style={styles.text}>{item.text}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    );
  };

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <DraggableFlatList
        data={data}
        onDragEnd={({data}) => setData(data)}
        keyExtractor={item => item.key}
        renderItem={renderItem}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  rowItem: {
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'black',
  },
  text: {
    color: 'black',
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

 

 

 

React 목록