React Nativeでページを引っ張って更新するのを実装する方法

Twitterなどでおなじみの下にスクロールをして更新する機能ありますよね。
react nativeでもこういったアプリっぽい動作を実装したいときもありますが、どのように実装するのかわからなかったので調べてみました。

関連ライブラリ

react nativeでこれらのような動作を実行しようと思えば、下記のライブラリが検索でヒットしました。
・react-native-gifted-listview
・react-native-pull-to-refresh
・react-native-pull-refresh
様々なライブラリが存在しますが、さらに調査をしてみたところReact Nativeの「ScrollView」と「ListView」では、標準でRefleshControlという機能が実装されていることがわかりました。
実際に実装もしてみましたが、それほど難しくなく引っ張って更新する動作が実現できたという印象でした。
上記のライブラリはいずれもScrollViewかListViewを継承しているっぽかったので、ScrollViewとListView以外で上記のような更新の機能を実装したい！と思われる方は、別の方法を模索する必要がありそうです。
今回は、余計なライブラリを追加するとバージョン管理も大変になるということもあり、ネイティブの機能で実装することを考えます。

ネイティブの機能で実装する

ちなみに公式のページはここになります。
ソースを下記に書いてみます。

import React from "react";
import { ScrollView, RefreshControl, Text } from "react-native";
 
class RefreshTest extends React.Component {
  this.state = {
    refreshing: false,
  };
 
  fetchData = () => {
    ...hogehoge()
  }
 
  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }
 
  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
      />
        <Text>pull to refresh!</Text>
      </ScrollView>
    );
  }
}

基本的にはScrollViewにデフォルトであるrefreshControlにRefreshControlコンポーネントを実装するだけです。
RefreshControlの引数にあるrefreshingは、更新を行っているクルクルを表示するかどうか、onRefreshは実際に引っ張られたときにどのような処理を行うかを表しています。
上記で言えば、onRefreshが実行されたときにrefreshingをtrueに設定した上で、fetchData()を実行し、その後refreshingをfalseに設定しています。
つまり、fetchData() にデータ取得に必要な処理を記述してあげると、引っ張って更新という処理を実現させることができます。
ただ一つ注意点としては、ScrollView内のrefreshControlで使用するRefreshControlコンポーネントは、きちんと最初にimportしてあげなければなりません。
これを忘れるとエラーが発生するので注意しておきたいところです。後はそれほど詰まることなく実装できるかと思います。

まとめ

今回は、react nativeで引っ張って更新する方法についてお話しました。
詳しく調べているとreact nativeには様々なコンポーネントがあるので、自分もまだまだ把握していない機能が多そうだと感じます。
ぜひとも他にも自分の知らない操作があるか今後も見ていきたいところですね。