【解決】React Native FlatList onEndReachedThresholdが動かない時の原因と対策

2025-05-31

FlatList コンポーネントの onEndReachedThreshold プロパティは、ユーザーがリストの末尾にどれくらい近づいたときに onEndReached イベントを発火させるかを制御するための数値です。この数値は、リストの可視領域の高さに対する割合として表されます。

具体的には、以下のようになります。

挙動
ユーザーがリストをスクロールし、リストの末尾が可視領域の指定された割合以内に入ると、onEndReached 関数が実行されます。これは、例えば無限スクロールのような、リストの末尾に近づいたときに新しいデータをロードする処理を実装する際に非常に役立ちます。
意味
- 0: リストの末尾に完全に到達したときに onEndReached が一度だけ呼び出されます。
- 0.5: リストの末尾の可視領域の半分の距離に達したときに onEndReached が呼び出されます。
- 1: リストの末尾が完全に表示される前に onEndReached が呼び出されます（理論上は、末尾のアイテムが少しでも見えるようになった時点）。
値の範囲
0 から 1 までの浮動小数点数です。

例

もし onEndReachedThreshold に 0.2 を設定した場合、ユーザーがリストの末尾の可視領域の 20% 以内の距離までスクロールすると、onEndReached 関数が呼び出されます。

リストの data プロパティが更新されてリストが再レンダリングされると、onEndReached の監視状態もリセットされます。
onEndReached イベントは、一度しか呼び出されないわけではありません。ユーザーが閾値を超えてスクロールバックし、再び閾値以内にスクロールすると、再度呼び出される可能性があります。そのため、onEndReached 内でデータの重複ロードを防ぐための処理（例えば、ローディング中のフラグを管理するなど）を実装することが推奨されます。

onEndReached が意図せず何度も呼ばれる

トラブルシューティング
- onEndReachedThreshold の値を少し大きくしてみる（例: 0.5 や 0.7 など）。
- onEndReached 内でローディング状態を管理し、データフェッチ中や処理中は新しいリクエストを送らないように制御する（例: isFetching という state 変数を導入する）。
- アイテムの高さが動的な場合は、getItemLayout プロパティを使用してアイテムの正確なレイアウトを FlatList に伝えることを検討する。
原因
- onEndReachedThreshold の値が小さすぎる場合、少しスクロールするだけで何度も閾値に達し、onEndReached が頻繁に呼び出されることがあります。
- onEndReached 内で非同期処理（API リクエストなど）を行っている際に、処理が完了する前にユーザーがさらにスクロールしてしまうと、複数のリクエストが同時に発行される可能性があります。
- リストのアイテムの高さが動的に変わる場合、閾値の計算が期待通りに行われず、早期に onEndReached が発火することがあります。

onEndReached が全く呼ばれない

トラブルシューティング
- リストのコンテンツが十分に長いか確認する。必要であれば、初期データを増やしてスクロール可能になるようにする。
- onEndReachedThreshold の値を小さくしてみる（例: 0.1 や 0 など）。
- onEndReached プロパティが FlatList に正しく渡されているか、スペルミスなどがないかを確認する。
原因
- リストのコンテンツが短く、スクロールバーが表示されない場合、末尾に到達することがないため onEndReached は呼び出されません。
- onEndReachedThreshold の値が大きすぎる場合（例えば 1）、リストの末尾が完全に表示されるまでイベントが発火しないため、体感的に呼ばれていないように見えることがあります。
- onEndReached プロパティ自体が正しく FlatList に設定されていない可能性があります。

onEndReached の呼び出しタイミングがずれる

トラブルシューティング
- getItemLayout を使用している場合は、その実装が正しいか確認する。すべてのアイテムに対して一貫した高さを返すように実装する必要があります。
- 不要な再レンダリングを避けるために、shouldComponentUpdate や React.memo などを活用してコンポーネントの最適化を行う。
- より複雑なレイアウトや処理を行っている場合は、スクロールイベントの処理負荷を下げるための工夫（例: デバウンスやスロットリング）を検討する。
原因
- レンダリングのパフォーマンスの問題により、スクロールイベントの処理が遅延し、onEndReached が期待したタイミングで呼び出されないことがあります。
- getItemLayout が正しく実装されていない場合、FlatList がアイテムのレイアウトを正確に把握できず、閾値の計算がずれる可能性があります。

TypeScript を使用している場合のエラー

トラブルシューティング
- onEndReached に渡す関数の型が (info: { distanceFromEnd: number }) => void であることを確認する。
原因
- onEndReached プロパティに渡す関数の型定義が FlatListProps の期待する型と一致していない可能性があります。

React Native Debugger などのツールを使用して、コンポーネントの props や state の変化を追跡する。
onScroll イベントを監視し、スクロールの位置と onEndReachedThreshold の関係をログ出力して確認する。
console.log を onEndReached 関数内に記述し、イベントがいつ、何回呼び出されているかを確認する。

基本的な無限スクロールの実装例

この例では、FlatList を使用して初期データを表示し、リストの末尾に近づくと追加のデータをロードする基本的な無限スクロールを実装します。

import React, { useState, useEffect } from 'react';
import { FlatList, Text, View, StyleSheet, ActivityIndicator } from 'react-native';

const ITEM_HEIGHT = 50; // 各アイテムの高さ

const App = () => {
  const [data, setData] = useState(Array.from({ length: 20 }, (_, i) => `アイテム ${i + 1}`));
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [allDataLoaded, setAllDataLoaded] = useState(false);

  const loadMoreData = async () => {
    if (loading || allDataLoaded) {
      return;
    }
    setLoading(true);
    setPage(prevPage => prevPage + 1);

    // ここでAPIリクエストなどの非同期処理を実行して追加データを取得する
    // 例として、2秒後に新しいデータを生成する処理をシミュレート
    await new Promise(resolve => setTimeout(resolve, 2000));

    const newData = Array.from({ length: 10 }, (_, i) => `追加アイテム ${(page * 10) + i + 1}`);

    if (newData.length === 0) {
      setAllDataLoaded(true);
    } else {
      setData(prevData => [...prevData, ...newData]);
    }
    setLoading(false);
  };

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  );

  const renderFooter = () => {
    if (loading) {
      return <ActivityIndicator size="large" color="#0000ff" />;
    }
    if (allDataLoaded) {
      return <Text style={styles.footerText}>すべてのデータをロードしました</Text>;
    }
    return null;
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
        onEndReached={loadMoreData}
        onEndReachedThreshold={0.2} // リストの末尾の 20% の位置で loadMoreData を呼び出す
        ListFooterComponent={renderFooter}
        getItemLayout={(data, index) => ({
          length: ITEM_HEIGHT,
          offset: ITEM_HEIGHT * index,
          index,
        })}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 15,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  footerText: {
    textAlign: 'center',
    padding: 10,
    color: '#888',
  },
});

export default App;

コードの説明

- data: 表示するアイテムの配列。初期データとして20個のアイテムを設定しています。
- loading: 追加データをロード中かどうかを示すフラグ。
- page: 現在のページ番号（API リクエストなどで使用）。
- allDataLoaded: すべてのデータをロード済みかどうかを示すフラグ。
loadMoreData 関数
- loading が true または allDataLoaded が true の場合は、処理を中断します。
- loading を true に設定し、page をインクリメントします。
- await new Promise(...) は、API リクエストなどの非同期処理をシミュレートするための遅延です。実際には、ここでサーバーから追加データを取得する処理を記述します。
- 取得した新しいデータを setData を使って既存のデータに追加します。
- もし新しいデータが空の場合は、allDataLoaded を true に設定します。
- 最後に loading を false に戻します。
renderItem 関数
- 各アイテムをレンダリングするための関数です。ここではシンプルな Text コンポーネントでアイテムの内容を表示しています。
renderFooter 関数
- FlatList のフッターコンポーネントとして表示されます。
- loading が true の場合は ActivityIndicator を表示し、ローディング中であることを示します。
- allDataLoaded が true の場合は、「すべてのデータをロードしました」というテキストを表示します。
- それ以外の場合は null を返して何も表示しません。
FlatList コンポーネント
- data: 表示するデータの配列。
- renderItem: 各アイテムのレンダリングに使用する関数。
- keyExtractor: 各アイテムに一意のキーを提供するための関数。
- onEndReached: スクロールが末尾に近づいたときに呼び出される関数として loadMoreData を指定しています。
- onEndReachedThreshold: 0.2 に設定されているため、リストの末尾の 20% の位置までスクロールすると onEndReached が呼び出されます。
- ListFooterComponent: フッターコンポーネントとして renderFooter を指定しています。
- getItemLayout: パフォーマンス向上のために、各アイテムの高さ、オフセット、インデックスを FlatList に提供します。ここではすべてのアイテムの高さが一定 (ITEM_HEIGHT) であることを前提としています。

onEndReachedThreshold の挙動

この例では、ユーザーがリストをスクロールし、最後のアイテムが見えるようになる少し前（リストの可視領域の高さの 20% 以内の距離）に達すると、loadMoreData 関数が呼び出されます。これにより、新しいデータが非同期でロードされ、リストに追加されて表示されます。

注意点

getItemLayout は、アイテムの高さが固定の場合にパフォーマンスを向上させるために使用できます。アイテムの高さが動的な場合は、使用しないか、動的な高さを返すように実装する必要があります。
エラーハンドリングや、ロード中の状態管理（連打防止など）も適切に行う必要があります。
実際のアプリケーションでは、loadMoreData 関数内で実際の API エンドポイントを呼び出し、サーバーから追加データを取得する必要があります。

onScroll イベントとスクロール位置の監視

FlatList の onScroll イベントを利用して、スクロールの位置を常に監視し、特定の閾値を超えた場合に処理を実行する方法です。

import React, { useState, useRef } from 'react';
import { FlatList, Text, View, StyleSheet, ActivityIndicator } from 'react-native';

const ITEM_HEIGHT = 50;

const App = () => {
  const [data, setData] = useState(Array.from({ length: 20 }, (_, i) => `アイテム ${i + 1}`));
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [allDataLoaded, setAllDataLoaded] = useState(false);
  const flatListRef = useRef(null);

  const loadMoreData = async () => {
    // ... (前述の例と同様のデータロード処理)
  };

  const handleScroll = ({ nativeEvent }) => {
    const contentHeight = nativeEvent.contentSize.height;
    const layoutHeight = nativeEvent.layoutMeasurement.height;
    const scrollOffset = nativeEvent.contentOffset.y;

    const triggerThreshold = contentHeight - layoutHeight - 200; // 末尾から 200 ピクセル手前で発火

    if (scrollOffset > triggerThreshold && !loading && !allDataLoaded) {
      loadMoreData();
    }
  };

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  );

  const renderFooter = () => {
    // ... (前述の例と同様のフッター)
  };

  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef}
        data={data}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
        onScroll={handleScroll}
        scrollEventThrottle={200} // スクロールイベントの発火頻度を調整 (ms)
        ListFooterComponent={renderFooter}
        getItemLayout={(data, index) => ({
          length: ITEM_HEIGHT,
          offset: ITEM_HEIGHT * index,
          index,
        })}
      />
    </View>
  );
};

// ... (styles は前述の例と同様)

export default App;

この方法のポイント

scrollEventThrottle プロパティで、onScroll イベントの発火頻度を調整できます。値を大きくするとパフォーマンスは向上しますが、イベントの検出が遅れる可能性があります。
これらの値を使って、末尾からどれくらいの位置にいるかを計算し、特定の閾値 (triggerThreshold) を超えた場合に loadMoreData を呼び出します。
onScroll イベントハンドラ内で、スクロールされた距離 (nativeEvent.contentOffset.y)、コンテンツ全体の高さ (nativeEvent.contentSize.height)、リストの表示領域の高さ (nativeEvent.layoutMeasurement.height) を取得します。

メリット

onEndReachedThreshold のように割合で考える必要がないため、直感的に理解しやすい場合があります。
閾値をピクセル単位で細かく制御できるため、より柔軟なトリガー条件を設定できます。

デメリット

閾値の計算を自分で行う必要があるため、少し複雑になる場合があります。
スクロールイベントは頻繁に発生するため、ハンドラ内の処理が重いとパフォーマンスに影響を与える可能性があります。scrollEventThrottle で調整が必要になります。

IntersectionObserver API (WebView 内など)

React Native の直接的な機能ではありませんが、WebView 内で表示しているコンテンツに対しては、ブラウザの IntersectionObserver API を利用して、特定の要素（例えば、フッター要素やローディングインジケーター）がビューポートに現れたことを検知し、React Native 側にメッセージを送ることで同様の処理を実現できます。

この方法のポイント

React Native 側でこのメッセージを onMessage ハンドラで受け取り、データのロード処理などを実行します。
ターゲット要素がビューポートに入ったときに、React Native 側に postMessage などで通知を送ります。
WebView 内の JavaScript で IntersectionObserver をインスタンス化し、監視したい要素をターゲットとして設定します。

メリット

WebView 内の複雑なレイアウトに対しても柔軟に対応できます。
宣言的な API で、要素の可視性を効率的に監視できます。

デメリット

React Native と WebView の間の通信を実装する必要があります。
WebView を使用している場合に限定される方法です。

react-native-infinite-scroll-component などのサードパーティライブラリ

FlatList の無限スクロール機能をより簡単に実装するためのサードパーティライブラリも存在します。これらのライブラリは、onEndReachedThreshold のような設定を抽象化し、より使いやすいインターフェースを提供している場合があります。

この方法のポイント

ライブラリによっては、ローディング状態の管理や、すべてのデータをロードし終わった状態の管理などを自動で行ってくれるものもあります。
ライブラリをインストールし、提供されているコンポーネントやフックを利用して FlatList をラップしたり、特定のプロパティを設定したりします。

メリット

多くの一般的なユースケースに対応した機能が提供されている場合があります。
実装が簡単になり、ボイラープレートコードを削減できます。

デメリット

ライブラリのメンテナンス状況に依存します。
ライブラリの設計思想によっては、カスタマイズが難しい場合があります。
ライブラリの依存関係が増えます。

より高度な機能や簡潔な実装
サードパーティライブラリの利用を検討します。ただし、依存関係やカスタマイズ性も考慮する必要があります。
WebView 内のコンテンツに対する処理
IntersectionObserver API の利用を検討します。
より細かい閾値制御やピクセル単位での調整
onScroll イベントの監視が適しています。
シンプルで基本的な無限スクロール
onEndReachedThreshold を直接使用するのが最も簡単で一般的な方法です。

【React Native】FlatList.getScrollableNode()徹底解説：エラーと解決策

FlatList. getScrollableNode()は、React NativeのFlatListコンポーネントが内部的に持っているスクロール可能なDOMノード（Webの場合）またはネイティブのスクロールビュー（モバイルアプリの場合）への参照を取得するためのメソッドです。

【徹底比較】React Native FlatList スクロール制御：getScrollResponder() と標準API の使い分け

getScrollResponder() の役割 FlatList のインスタンスで getScrollResponder() メソッドを呼び出すと、その内部で管理されている ScrollView のインスタンスが返されます。これにより、返された ScrollView のインスタンスを通じて、より低レベルなスクロール操作を行うことが可能になります。

【トラブルシューティング】React Native FlatList horizontalでよくあるエラーと解決策

FlatList コンポーネントの horizontal プロパティは、リストのアイテムを垂直方向（縦方向）に並べるのではなく、水平方向（横方向）に並べて表示するかどうかを指定するために使用します。具体的には、horizontal プロパティに true を設定すると、FlatList 内の各アイテムが左から右へ、または右から左へ（レイアウトの方向によります）と、横一列に配置されます。デフォルトでは false に設定されており、アイテムは縦に並びます。

FlatListパフォーマンス改善の秘訣：initialNumToRender以外の最適化手法

このプロパティは、FlatList が最初にマウントされたときに、画面上に表示する（または、表示されうる）アイテムの数を指定します。つまり、ユーザーがリストをスクロールする前に、どのくらいの数のアイテムを事前にレンダリングしておくかを決めるものです。

【React Native】FlatListのinitialScrollIndexを使いこなす！コード例で学ぶ実装方法

通常、FlatListは一番最初のアイテム（インデックス0）から表示を開始します。しかし、特定のアイテム（例えば、以前ユーザーが見ていた位置や、ハイライトしたいアイテムなど）からリストを表示させたい場合に、initialScrollIndexを使用します。

チャットアプリ開発者必見！React Native FlatList#invertedプロパティ活用術

FlatListは、React Nativeで大量のデータを効率的に表示するためのコンポーネントです。スクロール可能なリストを作成する際によく使用されます。invertedプロパティは、このFlatListのスクロール方向とアイテムの表示順序を反転させるために使用されます。デフォルトでは、FlatListは上から下へ（または左から右へ、horizontalがtrueの場合）とスクロールし、データは提供された順序で表示されます。

React Native FlatList ItemSeparatorComponentの代替実装と使い分け

ItemSeparatorComponent には、React コンポーネントまたはレンダリング関数を渡します。このコンポーネントまたは関数は、リスト内のそれぞれのアイテムの間にレンダリングされます。例この例では、ItemSeparator というシンプルなコンポーネントを ItemSeparatorComponent に渡しています。ItemSeparator コンポーネントは、高さ 1px、背景色が黒の View をレンダリングします。これにより、リストの各アイテムの間に黒い線が表示されます。