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

2025-05-31

FlatListは、React Nativeで大量のデータを効率的に表示するためのコンポーネントです。スクロール可能なリストを作成する際によく使用されます。

invertedプロパティは、このFlatListのスクロール方向とアイテムの表示順序を反転させるために使用されます。デフォルトでは、FlatListは上から下へ（または左から右へ、horizontalがtrueの場合）とスクロールし、データは提供された順序で表示されます。

しかし、inverted={true}を設定すると、以下のようになります。

- 通常、リストは下に向かってスクロールすると新しいアイテムが見えてきます。
- invertedをtrueにすると、上に向かってスクロールすると新しいアイテムが見えるようになります。これは、チャットアプリケーションなどで最新のメッセージが一番下から表示され、古いメッセージを見るために上にスクロールするような挙動を実装する際に非常に便利です。
アイテム表示順序の反転
- dataプロパティに与えられた配列のアイテムは、通常のFlatListでは先頭から順に表示されます。
- invertedをtrueにすると、data配列の最後のアイテムがリストの一番下（または開始位置）に表示され、最初のアイテムがリストの一番上（または終了位置）に表示されるようになります。

どのような場合に`inverted`を使用するか？

最も一般的なユースケースは以下の通りです。

タイムライン/フィード
最新の投稿が一番下に表示され、ユーザーが古い投稿を見るために上にスクロールする形式。
チャットアプリケーション
最新のメッセージが常に画面の一番下から表示され、ユーザーが古いメッセージを見るために上へスクロールする形式。

使用例

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

const DATA = [
  { id: '1', title: 'メッセージ 1' },
  { id: '2', title: 'メッセージ 2' },
  { id: '3', title: 'メッセージ 3' },
  { id: '4', title: 'メッセージ 4' },
  { id: '5', title: 'メッセージ 5 (最新)' },
];

const App = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        inverted={true} // ここで反転させます
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
        )}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 18,
  },
});

export default App;

上記の例では、DATA配列の最後のアイテム「メッセージ 5 (最新)」がリストの開始位置（画面の一番下）に表示され、上にスクロールすると古いメッセージが見えるようになります。

FlatList#invertedは非常に便利なプロパティですが、正しく機能させるためにはいくつかの注意点があります。ここでは、よくあるエラーとその解決策について説明します。

新しいアイテムがリストの「上」ではなく「下」に追加される

これはinvertedをtrueに設定した際に最もよくある混乱です。

解決策

FlatListのdataプロパティに渡す配列は、最新のアイテムが配列の最後にくるようにしてください。
新しいアイテムを追加する際は、setData([...oldData, newItem])のように、既存の配列の末尾に新しい要素を追加するようにします。

例

// 悪い例（invertedの場合、新しいアイテムが上に来てしまう）
const newData = [newItem, ...oldData]; // 新しいアイテムが配列の先頭に来ている

// 良い例（invertedの場合、新しいアイテムが下に来てくれる）
const newData = [...oldData, newItem]; // 新しいアイテムが配列の末尾に来ている

原因
inverted={true}は、リストの表示順序とスクロール方向を反転させます。つまり、dataプロパティに渡す配列が時系列の逆順になっている必要があります。新しいアイテムは常に配列の末尾に追加されるべきです。
問題の状況
inverted={true}にしているのに、新しいデータがリストの古いデータの上に追加されてしまう。チャットアプリで言うと、最新のメッセージがスクロール方向の一番上に表示されてしまう。

scrollToEnd() / scrollToIndex() が期待通りに動作しない

invertedを設定すると、スクロール方向が反転するため、通常のスクロールメソッドの挙動も反転します。

解決策
- リストの「一番下」（最新のアイテム）にスクロールしたい場合
  scrollToEnd()ではなく、scrollToOffset({ offset: 0, animated: true })を使用するか、またはscrollToIndex({ index: 0, animated: true })を試してください。
- リストの「一番上」（最も古いアイテム）にスクロールしたい場合
  scrollToStart()（このようなメソッドは存在しませんが概念的に）ではなく、scrollToEnd()を使用します。
- 多くの場合、チャットアプリのように「最新のメッセージに自動スクロール」したい場合は、新しいメッセージが追加されるたびにFlatListのRefを使ってthis.flatListRef.current.scrollToOffset({ offset: 0, animated: true });（またはscrollToIndex({ index: 0, animated: true });）を実行するのが適切です。
原因
invertedにより、リストの「終わり」と「始まり」の概念が論理的に反転しています。
問題の状況
inverted={true}なFlatListで、scrollToEnd()を呼び出すとリストの先頭にスクロールしたり、scrollToIndex(0)でリストの末尾にスクロールしたりする。

onEndReachedが発火しない、または意図しないタイミングで発火する

「もっと読み込む」機能（無限スクロール）を実装する際に発生しやすい問題です。

解決策
- onEndReachedThresholdの調整
  onEndReachedThresholdは、リストの「終わり」からどれくらいの距離でイベントを発火させるかを指定します。invertedの場合は、この閾値がスクロール方向の逆になることを考慮に入れる必要があります。小さい値（例: 0.1）から試して調整してください。
- データ取得ロジックの見直し
  通常、onEndReachedは「下へのスクロール」で古いデータを読み込むために使用されます。invertedでは、「上へのスクロール」で古いデータを読み込むため、onEndReachedが発火した際に、データ配列の先頭に新しい古いデータを追加する必要があります。
```
// 古いデータをロードするロジック
const loadOldMessages = () => {
  // APIから古いメッセージを取得
  const oldMessages = [...];
  // 既存のデータの先頭に古いメッセージを追加
  setData([...oldMessages, ...currentData]);
};
```
- リストの初期表示
  invertedで最初にリストを読み込む際、リストの「終わり」がすぐに画面に表示されるため、onEndReachedが即座に発火してしまうことがあります。これを避けるには、初期ロード時には発火させないようなフラグ管理を行うか、十分な初期データをロードするようにしてください。
原因
onEndReachedは、スクロールの「終わり」に達したときに発火します。invertedの場合、この「終わり」はリストの論理的な先頭（つまり視覚的には上端）になります。
問題の状況
inverted={true}のFlatListで、リストを上にスクロールしてもonEndReachedが発火しない、またはすぐに発火してしまう。

レイアウトのずれや表示の不整合

特にiOSとAndroidで挙動が異なる場合があります。

解決策
- ItemSeparatorComponentを使っている場合、そのコンポーネントがinvertedの挙動を考慮して正しく描画されているか確認してください。場合によっては、セパレータではなくアイテム自体のpaddingやmarginでスペースを調整する方が簡単かもしれません。
- contentContainerStyleやListHeaderComponentStyle、ListFooterComponentStyleなど、FlatListのスタイル関連のプロパティがinvertedと相まって意図しないレイアウトを引き起こしていないか確認します。特にpaddingVerticalやpaddingBottomなどが影響する可能性があります。
- カスタムのレンダリングロジック（renderItem内）で複雑なスタイルを使っている場合は、invertedがオンのときにそれがどのように作用するかをデバッグツールで確認してください。
原因
FlatList内のItemSeparatorComponentや、アイテム自体のmarginやpaddingの扱いがinvertedによって視覚的にずれることがあります。
問題の状況
inverted={true}にすると、アイテムの間に不要なスペースができたり、一部のアイテムが見切れたりする。

FlatListの初期ロード時の挙動が不安定

解決策
- initialScrollIndexやinitialNumToRenderプロパティを適切に設定することで、初期描画の安定性を高めることができます。
- 特にチャットアプリで最新のメッセージにスクロールしたい場合は、onLayoutイベントでFlatListのRefが利用可能になった後にscrollToOffset({ offset: 0, animated: false })を呼び出す方法も有効です。
- データの読み込み中はローディングインジケーターを表示し、データが完全にロードされてからFlatListを表示することで、ちらつきを軽減できます。
原因
invertedがtrueの場合、FlatListは「下から上へ」と描画を開始しようとします。しかし、初期データが少ない場合や、データの読み込みが遅い場合に、初期表示位置の計算が不安定になることがあります。
問題の状況
アプリを開いたときに、FlatListが最上部にスクロールされたり、一瞬ちらついたりする。

FlatList#invertedは、主にチャットアプリケーションや、最新のアイテムが下部から表示され、上へスクロールすると古いアイテムが表示されるようなタイムラインで非常に役立ちます。ここでは、具体的なコード例とその解説を行います。

例1: 基本的なチャット画面の実装

最も一般的な使用例です。新しいメッセージがリストの一番下に追加され、ユーザーは上へスクロールして古いメッセージを閲覧します。

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

// サンプルデータ（時系列で古いものから新しいものへ）
const INITIAL_MESSAGES = [
  { id: '1', text: 'こんにちは！' },
  { id: '2', text: '元気ですか？' },
  { id: '3', text: 'これは古いメッセージです。' },
  { id: '4', text: '新しいメッセージが下に表示されます。' },
];

const ChatScreen = () => {
  // メッセージリストの状態管理
  const [messages, setMessages] = useState(INITIAL_MESSAGES);
  // 入力中のテキスト
  const [inputText, setInputText] = useState('');
  // FlatListへの参照（スクロール操作に使う）
  const flatListRef = useRef(null);

  // 新しいメッセージが追加されたときに自動で一番下（invertedの場合は一番上）にスクロール
  useEffect(() => {
    // データを追加した直後にスクロールすると良い
    // inverted={true} の場合、一番下にスクロールするには offset: 0 を使う
    // setTimeoutを使うのは、レンダリングが完了するのを待つため
    if (messages.length > INITIAL_MESSAGES.length) { // 初期ロード時以外
      setTimeout(() => {
        flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
      }, 50); // 短い遅延を入れる
    }
  }, [messages]);

  // メッセージ送信関数
  const sendMessage = () => {
    if (inputText.trim() === '') return;

    const newMessage = {
      id: String(messages.length + 1), // 簡単なID生成
      text: inputText,
    };

    // メッセージを配列の最後に追加（inverted={true} で適切に表示されるように）
    setMessages((prevMessages) => [...prevMessages, newMessage]);
    setInputText(''); // 入力フィールドをクリア
  };

  // 各メッセージアイテムのレンダリング
  const renderItem = ({ item }) => (
    <View style={styles.messageBubble}>
      <Text style={styles.messageText}>{item.text}</Text>
    </View>
  );

  return (
    <KeyboardAvoidingView // キーボードの表示時にUIが隠れないように調整
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 60 : 0} // 必要に応じて調整
    >
      <FlatList
        ref={flatListRef} // RefをFlatListに設定
        data={messages}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        inverted={true} // ここが重要！リストを反転させます
        contentContainerStyle={styles.contentContainer} // コンテンツのパディング調整
        ListHeaderComponent={<View style={{ height: 20 }} />} // 上部に少しスペース
        ListFooterComponent={<View style={{ height: 10 }} />} // 下部に少しスペース
      />

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          value={inputText}
          onChangeText={setInputText}
          placeholder="メッセージを入力..."
          multiline
        />
        <Button title="送信" onPress={sendMessage} />
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? 25 : 0, // Androidのステータスバーを考慮
  },
  contentContainer: {
    paddingVertical: 10, // 上下方向のパディング
    justifyContent: 'flex-end', // invertedの場合、アイテムを下詰めに配置
  },
  messageBubble: {
    backgroundColor: '#DCF8C6',
    borderRadius: 8,
    padding: 10,
    marginHorizontal: 10,
    marginVertical: 4,
    maxWidth: '80%',
    alignSelf: 'flex-end', // 通常のメッセージは右寄せ
  },
  messageText: {
    fontSize: 16,
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 10,
    borderTopWidth: 1,
    borderTopColor: '#ccc',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  textInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 20,
    paddingHorizontal: 15,
    paddingVertical: 8,
    marginRight: 10,
    maxHeight: 100, // テキスト入力の最大高
  },
});

export default ChatScreen;

解説：

contentContainerStyle: invertedなFlatListでは、contentContainerStyleにjustifyContent: 'flex-end'を設定することで、アイテムが常に下詰めに配置され、上へスクロールすると古いアイテムが表示されるという一般的なチャットUIの挙動を実現しやすくなります。
KeyboardAvoidingView: これは、キーボードが表示されたときにテキスト入力フィールドが隠れないようにするためのReact Nativeのコンポーネントです。チャットアプリには必須です。
flatListRef.current?.scrollToOffset({ offset: 0, animated: true });: 新しいメッセージが送信された後、リストを最新のメッセージが表示される位置（invertedの場合、論理的な先頭、つまり視覚的な一番下）にスクロールします。offset: 0を指定することで、invertedリストの先頭（視覚的な最下部）にスクロールします。setTimeoutは、Stateが更新され、FlatListが再レンダリングされるのを少し待つためによく使われます。
messagesの状態管理: INITIAL_MESSAGESは古い順に並んでいます。新しいメッセージを追加する際は、setMessages((prevMessages) => [...prevMessages, newMessage])のように、常に配列の末尾に追加します。invertedがtrueなので、これが視覚的にリストの「一番下」（最新のメッセージの場所）に表示されます。
inverted={true}: これが肝です。このプロパティにより、FlatListは次のように動作します。
- スクロール方向の反転: 通常は下へスクロールして新しいコンテンツを見ますが、invertedでは上へスクロールして新しいコンテンツ（この場合は古いメッセージ）を見ます。
- アイテムの描画順序の反転: data配列の最後の要素がリストの一番下に、最初の要素がリストの一番上に描画されます。

例2: 無限スクロール（古いデータをロードする）の実装

チャットやタイムラインで、上へスクロールしたときに古いデータを読み込む機能を追加する場合の例です。

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

let messageIdCounter = 10; // ID生成用

// 初期メッセージ（最新の10件と仮定）
const generateMessages = (count, startId) => {
  const newMessages = [];
  for (let i = 0; i < count; i++) {
    newMessages.push({
      id: String(startId + i),
      text: `メッセージ ${startId + i}`,
      timestamp: Date.now() + (startId + i) * 1000, // 時系列を分かりやすく
    });
  }
  return newMessages;
};

const ChatWithInfiniteScroll = () => {
  const [messages, setMessages] = useState(generateMessages(10, 1));
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const flatListRef = useRef(null);

  // 古いメッセージをロードする関数
  const loadOldMessages = useCallback(async () => {
    if (isLoadingMore) return;

    setIsLoadingMore(true);
    console.log('古いメッセージをロード中...');

    // APIコールをシミュレート (2秒の遅延)
    await new Promise((resolve) => setTimeout(resolve, 2000));

    // 現在のメッセージのIDの最小値を見つける
    const firstMessageId = messages.length > 0 ? parseInt(messages[0].id, 10) : 0;
    const newOldMessages = generateMessages(5, firstMessageId + 100); // 5件の古いメッセージを生成（IDはもっと前のものにする）

    // **重要**: 新しい古いメッセージを配列の先頭に追加
    setMessages((prevMessages) => [...newOldMessages, ...prevMessages]);
    setIsLoadingMore(false);
  }, [isLoadingMore, messages]);

  // onEndReached が発火したときの処理
  const handleEndReached = () => {
    if (!isLoadingMore) {
      loadOldMessages();
    }
  };

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

  // フッターコンポーネント（ローディングインジケーター用）
  const renderFooter = () => {
    if (!isLoadingMore) return null;
    // inverted={true} の場合、このフッターはリストの最上部（古いデータ側）に表示される
    return (
      <View style={styles.loadingFooter}>
        <ActivityIndicator size="small" color="#0000ff" />
        <Text>古いデータをロード中...</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef}
        data={messages}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        inverted={true} // ここが重要！
        onEndReached={handleEndReached} // リストの終端（invertedでは上端）に到達したときに発火
        onEndReachedThreshold={0.5} // 終端から50%の距離で発火
        ListFooterComponent={renderFooter} // ローディングインジケーターをフッターとして表示
        contentContainerStyle={styles.contentContainer}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50, // ステータスバー対策
  },
  contentContainer: {
    paddingVertical: 10,
    justifyContent: 'flex-end', // これによりアイテムが下詰めに配置される
  },
  messageBubble: {
    backgroundColor: '#e0e0e0',
    borderRadius: 8,
    padding: 10,
    marginHorizontal: 10,
    marginVertical: 4,
    maxWidth: '80%',
    alignSelf: 'flex-start', // 例のために左寄せ
  },
  messageText: {
    fontSize: 16,
  },
  loadingFooter: {
    paddingVertical: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default ChatWithInfiniteScroll;

ListFooterComponent={renderFooter}: invertedの場合、ListFooterComponentはリストの論理的な先頭、つまり視覚的な上端に描画されます。したがって、ローディングインジケーターをここに配置することで、ユーザーが上にスクロールしたときに「もっと読み込む」インジケーターが表示されるようになります。
onEndReachedThreshold: onEndReachedが発火する閾値を設定します。0.5は、リストの残りのスクロール可能領域が50%になったときに発火することを意味します。
onEndReached: このイベントは、スクロールがリストの終端に近づいたときに発火します。invertedの場合、この終端はリストの論理的な先頭（視覚的な上端）になります。ユーザーが古いデータを見るために上にスクロールすると、このイベントがトリガーされます。
loadOldMessages: この関数は、古いメッセージをシミュレートして取得します。重要なのは、setMessages((prevMessages) => [...newOldMessages, ...prevMessages]); のように、新しくロードした古いメッセージを既存の配列の先頭に追加している点です。これにより、invertedがtrueであるFlatListでは、これらの新しい（古い）メッセージがリストの「上」（視覚的な上端）に追加され、自然な無限スクロールの体験が生まれます。

FlatList#invertedは非常に便利ですが、特定のケースや、より細かな制御が必要な場合に、その動作を代替する（または組み合わせる）方法がいくつか考えられます。ここでは、主な代替手法とそのユースケースについて説明します。

データ配列の直接操作 (dataプロパティを反転させる)

これは最も直接的な代替手段ですが、注意が必要です。

ユースケース
FlatListで単にアイテムの表示順序を反転させたいだけで、スクロール方向はデフォルトのままで良い場合。チャットアプリのような特殊なスクロールUIには不向きです。
デメリット・注意点
- パフォーマンスへの影響
  大量のデータを扱う場合、reverse()メソッドを頻繁に呼び出すとパフォーマンスに影響が出る可能性があります。特に新しいアイテムが追加されるたびに配列全体を反転させると、不要な再レンダリングや計算が発生します。
- スクロール方向の不一致
  アイテムの表示順序は反転しますが、FlatList自体のスクロール方向は通常の上から下へのスクロールのままです。チャットアプリのように「下から上にスクロールして古いデータを見る」という直感的なUIにはなりません。ユーザーは新しいデータを見るために「下」にスクロールし、古いデータを見るために「上」にスクロールすることになります。これはユーザー体験を損なう可能性があります。
- scrollToEnd()などの挙動
  scrollToEnd()はリストの論理的な末尾（視覚的な下部）にスクロールしますが、これは反転された配列の先頭のアイテムに相当します。
メリット
- FlatListのinvertedプロパティの挙動（特にスクロール位置やonEndReachedの発火タイミング）に混乱することが少ないかもしれません。
- 一部の古いReact Nativeのバージョンや特定の環境でinvertedが予期せぬ挙動をする場合に有効かもしれません。

方法
FlatListのinvertedプロパティを使わず、dataプロパティに渡す配列自体をArray.prototype.reverse()などを使って反転させます。

const originalData = [{id: '1', text: '旧'}, {id: '2', text: '新'}];
const displayData = [...originalData].reverse(); // スプレッド構文でコピーしてから反転

<FlatList
  data={displayData} // 反転されたデータを渡す
  renderItem={...}
  keyExtractor={...}
  // inverted={false} または省略
/>

ScrollView と flexDirection: 'column-reverse' の組み合わせ

これはFlatListよりも低レベルなアプローチであり、通常は推奨されませんが、概念的には可能です。

ユースケース
アイテム数が非常に少なく（数十個程度）、複雑なリスト機能が不要な場合。FlatListのパフォーマンスオーバーヘッドを避けたい、あるいは、特定の理由でFlatListを使いたくない場合（非常に稀です）。
デメリット・注意点
- パフォーマンス
  ScrollViewは全てのアイテムを一度にレンダリングするため、アイテム数が多い場合にパフォーマンスが大幅に低下します。これはFlatListの主要な利点（仮想化による効率的なレンダリング）を失うことになります。
- 機能不足
  onEndReachedのような便利な機能が組み込まれていないため、自分で実装する必要があります。
- スクロールの複雑さ
  scrollTo系のメソッドの挙動が、flexDirectionの変更によって直感的でなくなる可能性があります。
メリット
- シンプルなリストであれば実装が簡単。
- Flexboxの理解があれば、より細かなレイアウト制御が可能。

方法
FlatListの代わりにScrollViewを使用し、そのcontentContainerStyleにflexDirection: 'column-reverse'を設定します。これにより、アイテムが下から上へ配置されます。

import React, { useState, useRef, useEffect } from 'react';
import { ScrollView, Text, View, StyleSheet, Button, TextInput } from 'react-native';

const ChatWithScrollView = () => {
  const [messages, setMessages] = useState([
    { id: '1', text: '最初のメッセージ' },
    { id: '2', text: '真ん中のメッセージ' },
  ]);
  const [inputText, setInputText] = useState('');
  const scrollViewRef = useRef(null);

  useEffect(() => {
    // 新しいメッセージが追加されたら一番下（flexDirection: 'column-reverse'で上）にスクロール
    // contentOffset: 0 はScrollViewのコンテンツの先頭（flexDirection: 'column-reverse'では一番下）
    scrollViewRef.current?.scrollToEnd({ animated: true });
    // または scrollTo({ y: 0, animated: true }); // flex-end にあるため、contentOffset.y を 0 にすれば一番下にスクロール
  }, [messages]);

  const sendMessage = () => {
    if (inputText.trim() === '') return;
    const newMessage = { id: String(messages.length + 1), text: inputText };
    setMessages((prev) => [...prev, newMessage]); // 配列の末尾に追加
    setInputText('');
  };

  return (
    <View style={styles.container}>
      <ScrollView
        ref={scrollViewRef}
        contentContainerStyle={styles.scrollViewContent}
        // onContentSizeChange={(w, h) => scrollViewRef.current?.scrollToEnd({ animated: true })}
        // onLayout={(event) => scrollViewRef.current?.scrollToEnd({ animated: true })}
      >
        {messages.map((item) => (
          <View key={item.id} style={styles.messageBubble}>
            <Text style={styles.messageText}>{item.text}</Text>
          </View>
        ))}
      </ScrollView>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          value={inputText}
          onChangeText={setInputText}
          placeholder="メッセージを入力..."
        />
        <Button title="送信" onPress={sendMessage} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  scrollViewContent: {
    flexGrow: 1, // コンテンツが少なくてもScrollViewが全高を占めるように
    justifyContent: 'flex-end', // これでアイテムが下詰めに配置される
    flexDirection: 'column', // デフォルトは 'column' だが明示
    // flexDirection: 'column-reverse', // これを使うとアイテムが下から上に並び、スクロールも下から上になる
                                  // ただし、この場合 scrollToEnd() はリストの論理的な「末尾」（視覚的には一番上）にスクロールすることに注意
                                  // そのため、通常のチャットアプリでは、データ順序を維持しつつ justifyConten: 'flex-end' が推奨される
  },
  messageBubble: {
    backgroundColor: '#DCF8C6',
    borderRadius: 8,
    padding: 10,
    marginHorizontal: 10,
    marginVertical: 4,
    maxWidth: '80%',
    alignSelf: 'flex-end',
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 10,
    borderTopWidth: 1,
    borderTopColor: '#ccc',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  textInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 20,
    paddingHorizontal: 15,
    paddingVertical: 8,
    marginRight: 10,
  },
});

export default ChatWithScrollView;

上記のコメントでの注意点
ScrollViewでflexDirection: 'column-reverse'を使うと、scrollToEnd()の挙動がFlatList#invertedとは異なり、リストの論理的な末尾（視覚的な一番上）にスクロールします。一般的なチャットアプリの挙動（最新が下）を実現するには、flexDirection: 'column'のままjustifyContent: 'flex-end'を設定し、scrollToEnd()を使うのがより自然です。この場合、invertedと同じ「下から上へスクロール」のUIにはなりません。

FlatList + ListFooterComponent + データ管理の工夫

これはinvertedと似た挙動を実現しつつ、特定の制御を加えたい場合に検討できます。

ユースケース
ニュースフィードのように、最新の情報が常に一番上にあるべきだが、下部に何らかの固定UI（例えば投稿ボタン）を置きたい場合。チャットアプリには通常不向きです。
デメリット・注意点
- チャットアプリのように「下から上へスクロールして古いデータを見る」という一般的なUIとは逆になります。新しいメッセージを見るには「下」にスクロールする必要があるため、ユーザー体験として不自然に感じられることがあります。
- 無限スクロール（古いデータをロードする）を実装する場合、onEndReachedがリストの終端（視覚的な下端）で発火するため、ここで古いデータをロードして配列の末尾に追加する形になります。
メリット
- FlatListのパフォーマンス上の利点（仮想化）を維持できます。
- スクロールの方向が直感的（新しいデータを見るには下にスクロール）になるため、一部のユーザーには馴染みやすいかもしれません。
方法
- FlatListのinvertedはfalse（デフォルト）のままにします。
- データの配列は、最新のアイテムが先頭に来るように管理します。
- ListFooterComponentを使って、リストの一番下（通常は最新のデータが表示される場所）に、入力フィールドや「最新にスクロール」ボタンなどを配置します。
- 新しいデータが追加されたら、scrollToOffset({ offset: 0 })やscrollToIndex({ index: 0 })を使って、リストの先頭（最新のデータ）にスクロールします。

ほとんどの場合、チャットアプリケーションや、最新のデータが一番下から表示されるべきUIを実装する際には、FlatList#inverted={true}を使用するのが最も推奨される、効率的かつ自然な方法です。

代替手法は、invertedプロパティが抱える特定の制約（例: 極端なレイアウトのカスタマイズ、古いReact Nativeのバージョンでの互換性問題など、稀なケース）を回避したい場合や、パフォーマンスよりもシンプルな実装を優先する（ただし、アイテム数が極めて少ない場合のみ）といった特定の状況で検討されるべきです。

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

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

どのような場合にinvertedを使用するか？

使用例

新しいアイテムがリストの「上」ではなく「下」に追加される

scrollToEnd() / scrollToIndex() が期待通りに動作しない

onEndReachedが発火しない、または意図しないタイミングで発火する

レイアウトのずれや表示の不整合

FlatListの初期ロード時の挙動が不安定

例1: 基本的なチャット画面の実装

解説：

例2: 無限スクロール（古いデータをロードする）の実装

データ配列の直接操作 (dataプロパティを反転させる)

ScrollView と flexDirection: 'column-reverse' の組み合わせ

FlatList + ListFooterComponent + データ管理の工夫

どのような場合に`inverted`を使用するか？