{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/react-native-infinite-scroll-timeline",
  "path": "/posts/react-native-infinite-scroll-timeline",
  "publishedAt": "2025-01-11T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "React Native",
    "FastList"
  ],
  "textContent": "Mastodonのクライアントアプリを作るうえで最もコアな機能であるタイムラインを作成した。無限スクロールを実装するためにいろいろと調べたりしたのでまとめておく。\n\nFlatListが優秀\n\nFlatList\n\n- 完全なクロスプラットフォーム。\n- オプションの水平モード。\n- 設定可能なビューアビリティ コールバック。\n- ヘッダーのサポート。\n- フッターのサポート。\n- セパレーターのサポート。\n- 引っ張って更新します。\n- スクロールの読み込み。\n- ScrollToIndex のサポート。\n- 複数列のサポート。\n\nという多くの機能をサポートしているリストコンポーネント。\n\n今回はタイムラインの無限スクロールを実現したいということで、\n\n- リストを引っ張り更新\n- リストのそこについたら再フェッチ\n\n上記２つが実現できればいい。\n\nそしてその２つはFlatListに標準搭載されている。\n\nリストを引っ張り更新\n\nonRefresh というPropsが用意されている。\n\nこのイベントで最新情報を取得し、useStateを更新すればいい。\n\nリストのそこについたら再フェッチで無限スクロール\n\nonEndReachedという Propsが用意されている。\n\nこのイベントで最新情報を取得し、useStateを更新すればいい。\n\nその際スクロールのタイミングで重複のデータがsetされることがあった。重複チェックをすることで解決した。\n\nまたonEndReachedThresholdというPropsを使った。\n\n> onEndReachedThreshold: 0 ~\n> 1の間の数値でどのくらいの距離でonEndReachedを呼び出すかを決められます。0が一番近くで、1が一番遠いです。\n\nという記事を参照したのだけれど、公式のPropsには明記されていなかった。\n\n機能しているかを確認する必要がある。\n\n##その他、実装した機能\n\nボトムメニューのタブクリックでFlatListのトップにスクロールする\n\nレンダリング時にドムを取得しておき、タブクリックで書きイベントを発火させる。\n\nスクロールバーを非表示にする\n\nshowsVerticalScrollIndicatorというPropsをfalseにする。\n\nまだ実装していないけど試したい機能\n\nList~~~Componentを活用する\n\n- ListEmptyComponent\n- ListFooterComponent\n- ListHeaderComponent\n\n特にListFooterComponentは無限スクロール時の読み込みに使えそうなのでUI改善で使っていきたい。\n\nたぶんこれくらい。\n\n使ったPropsは以下の通り。",
  "title": "React Nativeで無限スクロールのタイムラインを作成した"
}