FlatListで特定のアイテムへ移動：React Native scrollToItem()の実践と応用

2025-05-31

`FlatList.scrollToItem()` とは

FlatList.scrollToItem() は、React Nativeの FlatList コンポーネントが提供するメソッドの一つで、指定したデータ項目（アイテム）が画面内の表示領域にスクロールされるように制御するために使用されます。

FlatList は、大量のデータを効率的に表示するためのリストコンポーネントです。画面に表示されていないアイテムはレンダリングせず、スクロールに応じて動的にレンダリングすることでパフォーマンスを最適化しています。そのため、特定のアイテムまでスクロールしたい場合に、この scrollToItem() メソッドが役立ちます。

使い方

scrollToItem() を使用するには、まず FlatList コンポーネントの参照（ref）を取得する必要があります。

import React, { useRef } from 'react';
import { FlatList, Button, View, Text } from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({ id: String(i), title: `Item ${i}` }));

function MyFlatListScreen() {
  const flatListRef = useRef(null);

  const handleScrollToItem = (itemToScroll) => {
    flatListRef.current.scrollToItem({
      item: itemToScroll, // スクロールしたいアイテムオブジェクト
      animated: true,    // スクロールをアニメーションさせるか (true/false, デフォルトはtrue)
      viewPosition: 0.5, // 表示領域のどこにアイテムを配置するか (0: 上端, 0.5: 中央, 1: 下端)
    });
  };

  // 例えば、ボタンが押されたら特定のアイテムにスクロールする
  const scrollToSpecificItem = () => {
    const targetItem = DATA[50]; // 例: 50番目のアイテムにスクロール
    handleScrollToItem(targetItem);
  };

  const renderItem = ({ item }) => (
    <View style={{ padding: 20, borderBottomWidth: 1, borderColor: '#ccc' }}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <View style={{ flex: 1 }}>
      <Button title="50番目のアイテムにスクロール" onPress={scrollToSpecificItem} />
      <FlatList
        ref={flatListRef}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

export default MyFlatListScreen;

パラメータ

scrollToItem() メソッドは以下のパラメータを持つオブジェクトを受け取ります。

viewOffset (number): (オプション) 最終的なターゲット位置からの固定オフセットピクセル数を指定します。viewPosition と組み合わせて、微調整を行う際に使用できます。
viewPosition (number): (オプション) スクロールしたアイテムが、ビューポート（表示領域）のどこに表示されるかを0から1の間の数値で指定します。
- 0: アイテムがビューポートの上端に配置されます。
- 0.5: アイテムがビューポートの中央に配置されます。
- 1: アイテムがビューポートの下端に配置されます。
- デフォルトは 0 です。
animated (boolean): (オプション) スクロールをアニメーションさせるかどうかを指定します。デフォルトは true です。false にすると即座に移動します。
item (Object): 必須。スクロールしたいデータ項目そのものです。FlatList の data プロパティに渡した配列の中から、目的のアイテムオブジェクトを指定します。

`scrollToIndex()` との違い

FlatList には scrollToItem() の他に scrollToIndex() という似たようなメソッドがあります。

scrollToIndex(): スクロールしたいデータ項目のインデックス（配列の何番目か）を指定します。
scrollToItem(): スクロールしたいデータ項目オブジェクトそのものを指定します。

一般的には、インデックスが既知の場合は scrollToIndex() の方が効率が良いとされています。scrollToItem() は、指定されたアイテムを見つけるためにデータ配列を線形にスキャンする必要があるためです。しかし、アイテムオブジェクト自体は持っているがインデックスが不明な場合は、scrollToItem() が便利です。

非同期処理: FlatList のレンダリングは非同期で行われるため、コンポーネントがマウントされた直後やデータの更新直後にすぐに scrollToItem() を呼び出すと、期待通りに動作しない場合があります。必要であれば、setTimeout などで少し遅延させるか、onLayout などのライフサイクルイベントでリストの準備ができたことを確認してから呼び出すことを検討してください。
データの一貫性: scrollToItem() に渡す item オブジェクトは、FlatList の data プロパティに渡されている配列内のオブジェクトと厳密に同じ参照である必要があります。もし異なる参照のオブジェクトを渡すと、FlatList はそのアイテムを見つけられずにスクロールしない可能性があります。
getItemLayout の使用: FlatList のパフォーマンスを向上させるために getItemLayout プロパティを使用している場合、scrollToItem() や scrollToIndex() がよりスムーズに動作します。これは、各アイテムのサイズとオフセットを事前に計算できるため、FlatList がどこにスクロールすべきかをより正確に把握できるためです。getItemLayout がない場合、特に表示領域外のアイテムにスクロールしようとすると、スクロールが不安定になったり、期待通りに動作しない場合があります。

スクロールが全く機能しない、または期待通りにスクロールしない

これは最もよくある問題です。いくつかの原因が考えられます。

原因A: FlatList の ref が正しく設定されていない、または参照が null である

scrollToItem() を呼び出すには、FlatList コンポーネントへの参照（ref）が必須です。これが正しく取得できていないと、flatListRef.current が null となり、メソッドを呼び出せません。

トラブルシューティング
1. useRef を使用して ref を宣言し、FlatList に正しく ref={flatListRef} のように渡しているか確認してください。
2. scrollToItem() を呼び出す前に console.log(flatListRef.current) を出力し、FlatList インスタンスが正しく参照されているか確認してください。例えば、null ではなく <FlatList ...> のようなオブジェクトが表示されるはずです。
```
// 悪い例 (refが設定されていない)
// <FlatList data={...} renderItem={...} />
// flatListRef.current は null になる

// 良い例
const flatListRef = useRef(null);
// ...
<FlatList
  ref={flatListRef} // ここが重要
  data={DATA}
  renderItem={renderItem}
  keyExtractor={item => item.id}
/>
// ...
flatListRef.current.scrollToItem({ ... });
```

TypeError: Cannot read property 'scrollToItem' of null

原因B: item パラメータが正しくない（FlatList の data に含まれていない、または参照が異なる）

scrollToItem() に渡す item オブジェクトは、FlatList の data プロパティに渡した配列内のオブジェクトと厳密に同じ参照である必要があります。もし異なるインスタンスのオブジェクトを渡すと、FlatList はそのアイテムを見つけられません。

トラブルシューティング

scrollToItem() に渡している item が、実際に FlatList の data 配列内に存在するか、そしてそのオブジェクトの参照が同じであるかを確認してください。
例えば、item.id のような一意のキーでアイテムを見つけ出して渡す場合、そのオブジェクトが元の data 配列から取得されたものであることを確認してください。

// 例: データが深いコピーなどで参照が変わってしまっている場合
const originalData = [{ id: '1', name: 'A' }];
const targetItem = { id: '1', name: 'A' }; // これはoriginalData[0]と参照が異なる
// flatListRef.current.scrollToItem({ item: targetItem }); // これでは動かない可能性が高い

// 正しい例:
const originalData = [{ id: '1', name: 'A' }, { id: '2', name: 'B' }];
const targetItem = originalData.find(item => item.id === '2'); // data配列から直接取得
flatListRef.current.scrollToItem({ item: targetItem }); // これで動く

原因C: FlatList のデータがまだロードされていない、またはレンダリングが完了していない

FlatList は非同期でレンダリングされるため、コンポーネントがマウントされた直後やデータの更新直後に scrollToItem() を呼び出すと、まだリストの準備ができていないために失敗することがあります。

トラブルシューティング
1. setTimeout を使って、少し遅延させてから scrollToItem() を呼び出してみてください。これは一時的なデバッグには役立ちますが、根本的な解決策ではありません。
2. より堅牢な方法としては、FlatList の onLayout イベントや onContentSizeChange イベントを利用して、リストのレンダリングが完了したことを確認してからスクロール処理を実行します。ただし、これらのイベントもリストの完全に準備ができたことを保証するものではないため、最終的には試行錯誤が必要です。
3. データの読み込み状態を管理し、データが完全にロードされてFlatListにセットされてからスクロール処理を呼び出すようにしてください。
```
// setTimeout を使った例 (デバッグ用)
useEffect(() => {
  if (DATA.length > 0) { // データがあることを確認
    setTimeout(() => {
      const targetItem = DATA[50];
      if (flatListRef.current) {
        flatListRef.current.scrollToItem({ item: targetItem });
      }
    }, 100); // 100ms 程度の遅延
  }
}, [DATA]); // DATAが更新されたら再実行
```

原因D: getItemLayout が設定されていない、または計算が正しくない

FlatList は各アイテムのサイズを知らないと、正確なスクロール位置を計算できません。特に表示領域外のアイテムにスクロールする場合、getItemLayout を設定していないとスクロールが不安定になったり、全く機能しなかったりすることがあります。

トラブルシューティング
1. 全てのアイテムが固定の高さを持つ場合、getItemLayout を設定することを強く推奨します。これにより、FlatList はオフセットを事前に計算でき、scrollToItem() のパフォーマンスと正確性が大幅に向上します。
2. getItemLayout の計算が正しいか（length と offset が各アイテムに対応しているか）確認してください。
```
// getItemLayout の例 (アイテムの高さが60の場合)
const getItemLayout = (data, index) => (
  { length: 60, offset: 60 * index, index }
);

<FlatList
  ref={flatListRef}
  data={DATA}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  getItemLayout={getItemLayout} // ここが重要
/>
```
アイテムの高さが可変の場合は getItemLayout を使うのが難しいため、scrollToItem() の動作が不安定になりやすいです。その場合は、FlatList の onLayout や onContentSizeChange イベントと組み合わせて、アイテムのレンダリング後に正確な位置を把握するなどの工夫が必要になることがあります。

スクロールはするが、表示位置がずれる

原因: viewPosition または viewOffset の設定が意図と異なる

トラブルシューティング
1. viewPosition の値を 0 (上端)、0.5 (中央)、1 (下端) などと変えてみて、意図した位置に表示されるか確認してください。
2. viewOffset は、viewPosition で決まった位置からさらにピクセル単位でオフセットを調整したい場合に使用します。例えば、ヘッダーがオーバーレイしている場合などに便利です。この値が正しく設定されているか確認してください。

スクロールがアニメーションしない

原因: animated パラメータが false に設定されている

トラブルシューティング
1. scrollToItem({ item: targetItem, animated: true }) のように、animated を true に設定していることを確認してください。デフォルトは true ですが、明示的に false にするとアニメーションしません。

スクロールが遅い、またはカクつく

原因: パフォーマンスの問題

トラブルシューティング
1. getItemLayout を使用していない
  上述の通り、getItemLayout は非常に重要です。設定することでパフォーマンスが大幅に改善されます。
2. keyExtractor が適切でない
  keyExtractor は各アイテムに一意のキーを提供するために必要です。キーが安定していないと、FlatList がアイテムを再レンダリングする際に問題が発生し、パフォーマンスが低下します。
3. renderItem が複雑すぎる
  renderItem 関数内で過剰な計算や、複雑なコンポーネントをレンダリングしている場合、パフォーマンスに影響します。可能な限りシンプルに保ち、必要に応じて React.memo を使用して不要な再レンダリングを防いでください。
4. 大量のデータ処理
  FlatList の data プロパティに非常に大量の（例えば数千を超える）アイテムを一度に渡している場合、JavaScriptスレッドがブロックされ、UIの応答性が低下する可能性があります。必要であれば、データを小分けにしてロードするなどの戦略を検討してください。

例1: 基本的なスクロール（ボタンを押して特定のアイテムへ）

最も基本的な例として、ボタンを押すとリスト内の特定のアイテムにスクロールする実装です。

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

// ダミーデータを作成
const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `アイテム ${i + 1}`,
}));

function BasicScrollToItemScreen() {
  const flatListRef = useRef(null); // FlatListへの参照を保持

  const scrollToSpecificItem = () => {
    // 例: 50番目のアイテム (インデックス49) にスクロール
    const targetItem = DATA[49];

    if (flatListRef.current && targetItem) {
      flatListRef.current.scrollToItem({
        item: targetItem,
        animated: true,    // スムーズなアニメーションでスクロール
        viewPosition: 0.5, // 画面の中央にターゲットアイテムを表示
      });
    } else {
      console.warn("FlatListの参照が見つからないか、ターゲットアイテムが不正です。");
    }
  };

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

  return (
    <SafeAreaView style={styles.container}>
      <Button
        title="アイテム50までスクロール"
        onPress={scrollToSpecificItem}
      />
      <FlatList
        ref={flatListRef} // ここでrefを設定
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        // パフォーマンス向上のため、固定高さの場合はgetItemLayoutを設定する
        getItemLayout={(data, index) => (
          { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
        )}
      />
    </SafeAreaView>
  );
}

const ITEM_HEIGHT = 80; // アイテムの高さに合わせて設定

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  item: {
    backgroundColor: '#f9c2ff',
    height: ITEM_HEIGHT, // getItemLayoutと一致させる
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default BasicScrollToItemScreen;

例2: 特定の条件で自動的にスクロール（例えば、新しいメッセージが追加された時）

チャットアプリケーションなどで、新しいメッセージが追加されたときに自動的に一番下までスクロールするようなシナリオです。

import React, { useRef, useState, useEffect } from 'react';
import { FlatList, Button, View, Text, TextInput, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native';

let messageId = 0; // メッセージのIDを生成するためのカウンター

function ChatScreen() {
  const flatListRef = useRef(null);
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');

  // 新しいメッセージが追加されたら自動的にスクロール
  useEffect(() => {
    if (messages.length > 0 && flatListRef.current) {
      // 最新のメッセージアイテムにスクロール
      const lastMessage = messages[messages.length - 1];
      // scrollToItem は、アイテムが見つからない場合に警告を出すことがあるので、
      // データの準備ができたことを確認してから呼び出すと良い
      setTimeout(() => { // FlatListのレンダリングを待つための軽い遅延
        if (flatListRef.current) { // 遅延後もrefが有効か確認
          flatListRef.current.scrollToItem({
            item: lastMessage,
            animated: true,
            viewPosition: 1, // 画面の下端に最新のメッセージを表示
          });
        }
      }, 50); // 短い遅延
    }
  }, [messages]); // messagesが更新されるたびに実行

  const handleSendMessage = () => {
    if (inputText.trim()) {
      const newMessage = {
        id: String(messageId++),
        text: inputText.trim(),
        timestamp: new Date().toLocaleTimeString(),
      };
      setMessages(prevMessages => [...prevMessages, newMessage]);
      setInputText('');
    }
  };

  const renderMessage = ({ item }) => (
    <View style={styles.messageItem}>
      <Text style={styles.messageText}>{item.text}</Text>
      <Text style={styles.messageTime}>{item.timestamp}</Text>
    </View>
  );

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
    >
      <FlatList
        ref={flatListRef}
        data={messages}
        renderItem={renderMessage}
        keyExtractor={item => item.id}
        // getItemLayout を使えない（メッセージの高さが可変なため）。
        // そのため、scrollToItemの動作が完璧ではない可能性もある。
        // この場合、scrollToEnd() を使う方がシンプルで確実な場合が多い。
        // 例えば: flatListRef.current.scrollToEnd({ animated: true });
        // ただし、特定のアイテムをターゲットにするscrollToItemの例として記載。
      />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          value={inputText}
          onChangeText={setInputText}
          placeholder="メッセージを入力..."
          multiline
        />
        <Button title="送信" onPress={handleSendMessage} />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  messageItem: {
    backgroundColor: '#e0e0e0',
    padding: 10,
    marginVertical: 4,
    marginHorizontal: 10,
    borderRadius: 10,
    alignSelf: 'flex-start', // 左寄せ
    maxWidth: '80%',
  },
  messageText: {
    fontSize: 16,
  },
  messageTime: {
    fontSize: 10,
    color: '#666',
    alignSelf: 'flex-end',
    marginTop: 5,
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 10,
    borderTopWidth: 1,
    borderColor: '#ccc',
    alignItems: 'center',
  },
  textInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 20,
    paddingHorizontal: 15,
    paddingVertical: 8,
    marginRight: 10,
    maxHeight: 100, // 最大高さを設定
  },
});

export default ChatScreen;

例3: `viewOffset` を使用して微調整する

ヘッダーが固定されており、その下にアイテムが表示されるようなレイアウトで、スクロールしたアイテムがヘッダーの下に隠れないように調整する場合などに viewOffset が役立ちます。

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

const DATA = Array.from({ length: 50 }, (_, i) => ({
  id: String(i),
  title: `アイテム ${i + 1}`,
}));

const HEADER_HEIGHT = 60; // 固定ヘッダーの高さ

function ScrollWithOffsetScreen() {
  const flatListRef = useRef(null);

  const scrollToItemAdjusted = (index) => {
    const targetItem = DATA[index];
    if (flatListRef.current && targetItem) {
      flatListRef.current.scrollToItem({
        item: targetItem,
        animated: true,
        viewPosition: 0, // アイテムをビューポートの上端に表示
        viewOffset: HEADER_HEIGHT, // ヘッダーの高さ分だけ下にオフセット
      });
    }
  };

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

  return (
    <SafeAreaView style={styles.container}>
      {/* 固定ヘッダー */}
      <View style={styles.header}>
        <Text style={styles.headerText}>固定ヘッダー</Text>
      </View>

      <Button
        title="アイテム20へ (ヘッダーを考慮)"
        onPress={() => scrollToItemAdjusted(19)} // インデックス19はアイテム20
      />
      <Button
        title="アイテム40へ (ヘッダーを考慮)"
        onPress={() => scrollToItemAdjusted(39)}
      />

      <FlatList
        ref={flatListRef}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        // getItemLayout を設定してパフォーマンスと正確性を確保
        getItemLayout={(data, index) => (
          { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
        )}
      />
    </SafeAreaView>
  );
}

const ITEM_HEIGHT = 70;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: HEADER_HEIGHT,
    backgroundColor: '#ADD8E6', // 薄い青
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: '#ccc',
    paddingTop: Platform.OS === 'android' ? 20 : 0, // Androidの場合のステータスバーを考慮
  },
  headerText: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#333',
  },
  item: {
    backgroundColor: '#FFD700', // ゴールド
    height: ITEM_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 5,
    marginHorizontal: 16,
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default ScrollWithOffsetScreen;

`FlatList` 内の代替メソッド

FlatList コンポーネント自体が、scrollToItem() 以外にもスクロールを制御するためのメソッドを提供しています。

scrollToIndex(params):
- 説明: これは scrollToItem() と非常によく似ていますが、スクロールしたいアイテムの**インデックス（配列の何番目か）**を指定します。
- 使用例:
```
flatListRef.current.scrollToIndex({
  index: 49, // 50番目のアイテム (0-based index)
  animated: true,
  viewPosition: 0.5,
});
```
- scrollToItem() との比較:
  - scrollToItem(): アイテムのオブジェクト自体を知っている場合に便利です。
  - scrollToIndex(): アイテムのインデックスを知っている場合に便利です。一般的に、getItemLayout が設定されている場合は、インデックスベースの方が内部的な計算がシンプルになるため、推奨される場合があります。
scrollToOffset(params):
- 説明: これは、リストの特定のピクセルオフセットまでスクロールします。例えば、リストの先頭から1000ピクセル下までスクロールしたい場合にこれを使用します。
- 使用例:
```
flatListRef.current.scrollToOffset({
  offset: 1000, // 上から1000ピクセルの位置までスクロール
  animated: true,
});
```
- 用途:
  - 特定のアイテムではなく、正確なピクセル位置にスクロールしたい場合に適しています。
  - プログラムでスクロール位置を厳密に制御したい場合（例：カスタムスクロールバーの実装など）。
  - ただし、アイテムの高さが変動する場合は、目的のアイテムの正確なオフセットを計算するのが難しい場合があります。
scrollToEnd(params):
- 説明: リストの最後までスクロールします。
- 使用例:
```
flatListRef.current.scrollToEnd({ animated: true });
```
- 用途:
  - チャットアプリケーションで新しいメッセージが来たときに常に一番下を表示したい場合など、リストの最後に移動したい場合に非常に便利です。
  - 簡単な「トップへ戻る」ボタンの反対の機能として。
flashScrollIndicators():
- 説明: スクロールインジケーター（スクロールバー）を短時間表示します。これはスクロール位置を視覚的にユーザーに伝えるために使われますが、実際にスクロールはしません。
- 使用例:
```
flatListRef.current.flashScrollIndicators();
```
- 用途: ユーザーがリストのどこにいるかを示したいが、リストが実際にスクロールするトリガーがない場合に役立ちます。

`FlatList` 以外のリストコンポーネント

React Nativeには、FlatList 以外にもリストを表示するためのコンポーネントや、よりパフォーマンスに優れたサードパーティ製のライブラリが存在します。

SectionList:
- 説明: FlatList のようにデータを仮想化しますが、セクション（グループ）分けされたデータを表示するのに特化しています。例えば、日付ごとにメッセージをグループ化するチャットアプリや、アルファベット順に連絡先をグループ化するアドレス帳などで使われます。
- スクロール方法: FlatList と同様に scrollToItem(), scrollToIndex(), scrollToOffset(), scrollToEnd() をサポートしています。scrollToItem() を使う場合は、セクションヘッダーも含めて考慮する必要があります。
- 用途: グループ分けされたデータリストの表示に最適です。
サードパーティ製ライブラリ:
- React Nativeの組み込みリストコンポーネント（特にFlatList）のパフォーマンスが十分でない、または特定の高度な機能が必要な場合、サードパーティ製のライブラリが強力な代替手段となります。
- FlashList (by Shopify):
  - 説明: FlatList のドロップインリプレイスメントとして設計されており、非常に高いパフォーマンスを提供します。ビューをリサイクルすることで、メモリ使用量を減らし、スクロール時の空白セル（white blank cells）をなくすことを目指しています。APIは FlatList とほとんど同じなので、既存の FlatList を FlashList に置き換えるのが比較的容易です。
  - 用途: 大量のデータを持つリストでパフォーマンスの問題に直面している場合に強く推奨されます。
- RecyclerListView (by Flipkart):
  - 説明: AndroidのRecyclerViewやiOSのUICollectionViewにインスパイアされた、非常に高性能なリストビューです。ビューのリサイクルをより細かく制御できるため、複雑なレイアウトや非常に巨大なリストで最高のパフォーマンスを引き出すことができます。
  - 注意点: FlashListと比較して学習曲線がやや急で、セットアップが複雑になる可能性があります。

大量のデータを持つリストでパフォーマンスの問題がある: FlashList を試すのが現在の最善の選択肢です。RecyclerListView はさらに細かな制御が可能ですが、導入の難易度が高まります。
セクション分けされたリスト: SectionList が最適です。
アイテム数が少なく、内容が固定的なリスト: ScrollView で十分な場合があります。
リストの最後までスクロールしたい: FlatList.scrollToEnd() が最もシンプルで効果的です。
正確なピクセルオフセットにスクロールしたい: FlatList.scrollToOffset() が適切です。
基本的なリストで、特定のアイテムにスクロールしたい: まずは FlatList.scrollToItem() または FlatList.scrollToIndex() を検討します。getItemLayout を設定することで、安定した動作とパフォーマンスが得られます。

【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 をレンダリングします。これにより、リストの各アイテムの間に黒い線が表示されます。