ReactNativeドラッグアンドドロップでリストを並び替え

目的

ReactNativeでドラッグアンドドロップでリストを並び替えることをしたい。

以下のようなライブラリがある様子。試していく。
react-native-sortable-list
react-native-draggable-flatlist
react-dnd(テーブルのソートは自分で..)

react-native-sortable-list

iOSでは良い感じに動いたが、AndroidでScrollとかぶると上手く行かない...
さらにAnimationに関して以下のwarningがでてしまう。

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false

ボツ

react-native-draggable-flatlist

# 依存ライブラリのインストール
expo install react-native-reanimated
expo install react-native-gesture-handler

# 本体
expo install react-native-draggable-flatlist

これはiOSでもAndroidでも、scrollしてもいい感じにうごきました。

renderItemの引数に{ item, index, drag, isActive }が渡される。
このdragを実行するとdraggableの状態になる。
サンプルや自分の実装では、ItemのonLongPressで実行しているがボタンのpressなどでも実行出来る。
またisActiveで選択状態かわかるので、スタイルを変えるとわかりやすい。

onDragEndで引数に並びが変わったあとのdataが帰ってくるので、必要な情報を保存してして、 最初のdataを差し替えればよし。

画面外へのドラッグしながらスクロールする場合は、結構遅いのであんまり長い距離はこういうのでは移動させないほうが良いかも

<DraggableFlatList
          style={styles.list}
          data={this.state.list}
          keyExtractor={(item, index) => `draggable-item-${index}`}
          renderItem={this.renderItem}
          onDragEnd={this._onDragEnd}
        />

  renderItem = ({ item, index, drag, isActive }) => {
    const activeStyle = {
      backgroundColor: isActive ? "#ffdddd" : "#fff",
      borderColor: "red",
      transform: [
        { scale: this.state.itemScale },
      ],
    };
    const dStyle = isActive ? activeStyle : []

    return (
      <TouchableOpacity style={[styles.listItem, dStyle]} onLongPress={() => this._itemOnLongPress(drag)}>
        <Text> test me{item}</Text>
      </TouchableOpacity>
    );
  };