react-native - React Native FlatList が Android では動作しないのに、Web 用であるのはなぜですか?

Question

Expo を使用して、バックエンド用に AWS で反応するネイティブ アプリを構築しています。

FlatList と AWS データを使用して友達のリストを表示しようとしています。リストは機能し、Web ブラウザーでは表示されますが、何らかの理由で、Android フォンでは表示されません。問題は何ですか？

友達リスト.tsx

import { API, graphqlOperation } from 'aws-amplify';
import * as React from 'react';
import {useEffect, useState} from 'react';
import { FlatList, View, ScrollView, Text, StyleSheet } from 'react-native';

import { listUsers } from '../graphql/queries';
import FriendsListItem from '../components/FriendsListItem';

export default function FriendsList() {

    const [ users, setUsers ] = useState([]);

    useEffect( () => {
        const fetchUsers = async () => {
            try {
                const usersData = await API.graphql(
                    graphqlOperation(
                        listUsers
                    )
                )
                setUsers(usersData.data.listUsers.items);
            } catch (e) {

            }
        }
        fetchUsers();
    },[])

    return (
        <View style={ styles.container }>
            <FlatList
                style={{ width: '100%' }}
                data={users}
                renderItem={({ item }) => <FriendsListItem user={item} />}
                keyExtractor={(item) => item.id}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
});

FriendsListItem.tsx

import * as React from 'react';
import { View, Text, StyleSheet, Image, TouchableWithoutFeedback } from 'react-native';
import { API, graphqlOperation, Auth } from "aws-amplify";

import { User } from './types';

export type FriendsListItemProps = {
    user: User;
}

const FriendsListItem = ( props: FriendsListItemProps ) => {
    const { user } = props;
    return (
           <TouchableWithoutFeedback>
               
                <View style={styles.container}>
                    <View style={styles.lefContainer}>
                        <Image source={{ uri: user.imageUri }} style={styles.avatar}/>
                        <View style={styles.midContainer}>
                            <Text style={styles.username}>{user.name}</Text>
                            <Text numberOfLines={2} style={styles.status}>{user.email}</Text>
                        </View>
                    </View>
                </View>
                
            </TouchableWithoutFeedback>  
    );
}

export default FriendsListItem;

const styles = StyleSheet.create({
        container: {
          flexDirection: 'row',
          width: "100%",
          justifyContent: 'space-between',
          //height: '100%',
        },
        lefContainer: {
          flexDirection: 'row',
          padding: 16,
        },
        midContainer: {
          justifyContent: 'space-around'
        },
        avatar: {
          width: 60,
          height: 60,
          borderRadius: 50,
          marginRight: 15,
        },
        username: {
          fontWeight: 'bold',
          fontSize: 16,
        },
        status: {
          fontSize: 16,
          color: 'grey',
        },
});