【React Native】「react-native-gifted-chat」ライブラリでコード上から最下部までスクロールする処理を実行する

最近、React Native で開発しているアプリにチャット機能の開発を行っているのですが、その際にプログラム上でページの最下部までスクロールする処理を実行したかったので備忘録としてまとめ。
なお、使用しているライブラリは「react-native-gifted-chat」です。
このライブラリ本当に便利なので、チャット機能を実装するなら是非導入してください!

 

さて実装方法ですが、まず事前準備として、<GiftedChat> コンポーネントに ref を指定します。
サンプルコードは下記の通りです。

<GiftedChat
  ref={ref => this.giftedChatRef = ref}
  messages={messages}
  onSend={this.sendMessage}
  user={this.state.sender}
  locale='ja'
  placeholder='メッセージを入力'
  scrollToBottom={true}
  scrollToBottomComponent={() => {return <Ionicons name='chevron-down' size={18} />}} />

あとは、最下部へスクロールを実行したいタイミングで、下記を実行すればOKです!

this.giftedChatRef.scrollToBottom();

最初は、React Native の ScrollView コンポーネントのメソッド scrollTo を使ってみたのですが、ワーニングが発生したため却下しました。
で、最終的に上記の書き方ならワーニングも発生しないため、採用しました。
アニメーション付きでスルスル〜っという感じでスクロールするのでなかなかいい感じです。

 

以上、React Native の「react-native-gifted-chat」ライブラリで、コード上から最下部までスクロール方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG