React NativeにてUITableViewのような編集機能について

Question

ReactNativeにてUITableViewの編集機能を実装したいです。
UITableViewの編集機能

こちらはヘッダーの右上ボタンを押すと、テーブルの各行が
右にずれて削除or順番の入れ替えができるようになります。

ReactNativeを使ってこの機能を実装したいのですが、
右にずれる際にボタンを表示したり、順番を入れ替えたりする方法がわかりません。

ヘッダーにボタンを表示したり、テーブルビューっぽいものを出すことはできたのですが、ほかの処理が検討もつきません。

お分かりになる方おりましたら、アドバイス頂くことは難しいでしょうか。

import React from 'react';
import { StyleSheet, Text, View, ScrollView, SafeAreaView, FlatList } from 'react-native';
import { Button, ButtonGroup, List, ListItem } from 'react-native-elements';
import { connect } from 'react-redux';

import * as actions from '../actions';

const TABLE_DATA = [

  {
    title: 'イベント名AAA',
    total: 20000,
    number: 6,
    items:[
      1,2,3
    ],
  },

  {
    title: 'イベント名BBB',
    total: 20000,
    number: 6,
    items:[
      1,2,3
    ],
  },
  {
    title: 'イベント名CCC',
    total: 20000,
    number: 6,
    items:[
      1,2,3
    ],
  },
  {
    title: 'イベント名DDD',
    total: 20000,
    number: 6,
    items:[
      1,2,3
    ],
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

class HomeScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      selectedIndex: ALL_INDEX,
    };
  }

  static navigationOptions = ({ navigation }) => {
    const { state } = navigation
    return {
      headerRight: <Button
        style={styles.headerButton}
        type="clear"
        title="編集"
        color="white"
        onPress={() => state.params.handleSave()}
      />,
    }
  }

  saveDetails() {
    alert('saved')
  }

  onListItemPress = (selectedReview) => {
    this.props.selectDetailReview(selectedReview); // ←追記部分
    this.props.navigation.navigate('edit', selectedReview);
  }

  renderRow ({ item }) {
    return (
      <ListItem
        roundAvatar
        title={item.name}
        subtitle={item.subtitle}
        avatar={{uri:item.avatar_url}}
      />
    );
  }


  // 画面描画
  render() {

    return (
      <SafeAreaView style={styles.safearea}>
        <ScrollView>
            <FlatList
            style={styles.flatlist}
            data={TABLE_DATA}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => (
                    <ListItem
                    style={styles.item}
                    title={item.title}
                    onPress={() => this.onListItemPress(item)}
                    bottomDivider
                />
            )}
            />

          </ScrollView>
      </SafeAreaView>
    );
  }
}

const mapStateToProps = (state) => { // `state`を引数として受け取るアロー関数
  return {
    // `state.review.allReviews`を → `this.props.allReviews`にコピー
    allReviews: state.review.allReviews
  };
};

const styles = StyleSheet.create({

  headerButton: {
    color: "#000",
    //backgroundColor: 'rgba(255, 255, 255, 0.0)',
  },

  safearea: {
    flex: 1,
    backgroundColor: "#eee"
  },

  text: {
    alignSelf: 'center',
    margin: 20
  },

  flatlist: {

  },

  item: {
    //backgroundColor: '#ffffff',
    //padding: 10,
    //marginVertical: 2,
    //marginHorizontal: 2,
    //borderWidth: 0.5,
    //borderBottomWidth: 0.5,
    //borderColor: '#000000',
  },
  title: {
    fontSize: 32,
  },
});

//export default HomeScreen;
export default connect(mapStateToProps, actions)(HomeScreen);

2019年12月11日 追記

ご回答ありがとうございます。
下記の手順で試したところエラーがでました。

① npm i react-native-tableview でインストール
② TableViewタグをrenderに追加

エラー内容
ReferenceError: Can't find variable: TableView

render() {

return (

	<ScrollView>
	<Text>aaa</Text>
	<TableView>
	</TableView>
);
}

③ importで下記のように宣言 (公式にドキュメントが見当たらなかったため下記で設定)
import TableView from 'react-native-tableview';

エラー内容
null is not an object (evaluating 'r(d[0]).NativeModules.RNTableViewManager.Constants')

gitを見るとXcodeにてRNTableViewManagerを追加しているような記述があるのですが、
Xcodeのプロジェクトの場所及び、RNTableViewManager.hなどの保存してある場所がよくわかっておりません。

この設定が必要なのかもしれないのですが、よく理解できておらず・・・。

Comments

[thyda.eiqau]

react-native table order moveなどで検索すると良さそうなライブラリがいくつか出てきますが、ライブラリを使いたくない、使うことができない状況でしょうか？

[momiji0210]

thyda.eiqau様

ご確認ありがとうございます！
この辺、勉強し始めたばかりでライブラリ良く分かっておりませんでした。

ライブラリ使うことは問題ございません。
何かオススメがあったらご教示いただきたいです。

[thyda.eiqau]

私はそのような機能を実装したことがないので実際の使用感はわかりませんが、ライブラリのリポジトリなんかを見てプロジェクトが活発に動いているやつを選んだほうが、問題が起きたときに苦しむ確率が低いと思います。私は昔マイナーなライブラリを使ったらトラブったときにググっても質の良し悪し以前にそもそも情報が出てこずに苦しんだ経験があります
あとは基本的ですがデモを見てイメージに近いものを選ぶのがよいでしょう

[momiji0210]

ご回答ありがとうございます。
色々と見てみたのですが、ご紹介いただきましたreact-native-tableが一番使いやすそうでした。
https://github.com/aksonov/react-native-tableview

こちらをインストールしたのですが、
null is not an object (evaluating 'r(d[0]).NativeModules.RNTableViewManager.Constants')
というエラーがでてしまい表示ができませんでした。

あまりreact環境になれていないため、違うかもしれませんが、link〜みたいな入力もしました。
ググってもあまり情報が出てこずに同じく苦しんでおります。

こちらインストール方法が違うのでしょうか。

[thyda.eiqau]

どのようにしてインストールしたか、どういうコードを書いて実行したらエラーになったのか、質問本文に追記してください

[momiji0210]

ご回答ありがとうございます。周りに聞ける方がいないため、本当に助かります。
本文内にエラー内容などを追記させていただきました。