react-native-draglistライブラリを利用する

サンプルコードを利用して　App.jsを作成します。

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';

import Animated, {useSharedValue} from 'react-native-reanimated';

import React, {useState} from 'react';

import DragList, {DragListRenderItemInfo} from 'react-native-draglist';

const SOUND_OF_SILENCE = ['hello', 'darkness', 'my', 'old', 'friend'];

function DraggableLyrics() {

  const [data, setData] = useState(SOUND_OF_SILENCE);

  function keyExtractor(str) {

    return str;

  }

  function renderItem(info) {

    const {item, onDragStart, onDragEnd, isActive} = info;

    return (

      <TouchableOpacity

        key={item}

        onPressIn={onDragStart}

        onPressOut={onDragEnd}>

        <Text>{item}</Text>

      </TouchableOpacity>

    );

  }

  async function onReordered(fromIndex, toIndex) {

    const copy = [...data]; // Don't modify react data in-place

    const removed = copy.splice(fromIndex, 1);

    copy.splice(toIndex, 0, removed[0]); // Now insert at the new pos

    setData(copy);

console.log(copy); ・・・・⓵

 

  }

  return (

    <View>

      <DragList

        data={data}

        keyExtractor={keyExtractor}

        onReordered={onReordered}

        renderItem={renderItem}

      />

    </View>

  );

}

export default function App() {

  return (

    <View style={styles.container}>

      <DraggableLyrics/>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

  box: {

    height:100,

    backgroundColor: 'violet'

  }

});

npx expo install react-native-reanimated react-native-draglist

として、

npx expo install --fix

として、

npx expo start -c 

で実行する。

⓵を入れると現在の順番を、コンソールに出力できます。