PIYO - Tech & Life -

Android PでReact Nativeアプリの逆方向のリストのスクロールが引っかかる感じになった

ReactNative Android

自社でも使っているツールのReact Native製のアプリを使っている同僚から、Androidを上げたらスクロールがおかしいよという連絡があったので調査をしました。

問題が起こるのは、逆方向のリストを表示している箇所です。逆方向のリストとは画面一番したが要素の先頭で、上にスクロールしていくと追加読み込みが起こるという、チャットのような画面のことです。

元々これを実現するためにListViewをベースにして逆向きリストを実現できるこちらのライブラリを使っていました。

GitHub - expo/react-native-invertible-scroll-view: An invertible ScrollView for React Native
An invertible ScrollView for React Native. Contribute to expo/react-native-invertible-scroll-view development by creating an account on GitHub.

最初の調査の段階ではもしかしてこれが古いせいなのかな?と疑いました。

ところで、1年ちょい前ぐらいからReact NativeにはFlatListという新しいコンポーネントが用意されており、ListViewよりもFlatListを使うほうが良いです。FlatListにはリストを逆向きにするためのinvertedというプロパティも用意されているため逆向きリストも簡単に実現できます。

ということを知っていたのでライブラリを使わずにFlatListに変更すれば直るかも、なんて簡単に考えていました。

結果、FlatListへの置き換えは簡単に済んだのですが、スクロールの挙動は全く直りませんでした。invertedオプションを無くすと(=上から下に要素が並ぶようにすると)、スクロールの問題がありませんでしたので、何かのバグかな?と思い、React Nativeのissueにあたることにしました。

早速こんなんが見つかりまして、

Inverted FlatList doesn't work on Android P · Issue #19434 · facebook/react-native · GitHub
[ Yes ] I have reviewed the documentation [ Yes ] I have searched existing issues [ Yes ] I am using the latest React Native version When using FlatList with inverted={true} the scrolling doesn't work as expected. it seems that the momen...

どうやら今回と同じ問題について話しているようだぞ、というのがわかりました。ネイティブ側の実装をいじって回避できるという話もあるようですが、定かではないしあまりやりたくない感じだなーというところまでわかりました。

Android側の実装が変わったのに対してReact Native側が対応しきれていないという風に見えるので、ちょっと対応待ちかなと思います。