浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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」ライブラリで、コード上から最下部までスクロール方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)