FlattList not scrolling all content

Question

I'm learning react native and decided to make a list of my games, for that I use a FlatList (code below), but for some reason the FlatList just scroll a little and I can't see the entire content. I've tryed to add 'flex: 1' in a style (like some awnsers in the internet) but when I do this, all my content turn blank. Here are a screenshot of the maximum I can scroll.

My code (The function don't change nothing in layout, I just pick some data from a API, so I don't paste here):

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

export default function App() {
  const [id, setId] = React.useState('');
  const [apps, setApps] = React.useState([]);

  return (
    <SafeAreaView style={{padding: 20}}>
      <StatusBar hidden={false} backgroundColor={"white"} barStyle={'dark-content'} />
      <View>
        <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} onChangeText={text => setId(text)} keyboardType={'numeric'} value={id} placeholder={"Insira o ID do jogo aqui"} />
        <Button onPress={e => addApp()} title="Adicionar" color="#841584" accessibilityLabel="Salvar Id" />
          
        <View style={{marginTop: 32}}>
          <FlatList data={apps} scrollEnabled={true}
            renderItem={({item}) => 
              <View style={{alignItems: 'center', marginBottom: 32}}>
                <Image style={{width: "100%", height: 200}} source={{ uri: item.image}} />
                <Text style={{fontSize: 20}}>{item.name}</Text>
                <View style={{width: '100%', flexDirection: 'row', flex: 4, justifyContent: 'space-around'}}>
                  <View style={{flexDirection:'row', alignItems: 'center'}}>
                    <Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/disc.png')} />
                    <Text>{item.disc}</Text>
                  </View>
                  
                  <View style={{flexDirection:'row', alignItems: 'center'}}>
                    <Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/calendar.png')} />
                    <Text>{item.dateLaunch}</Text>
                  </View>
                  
                  <View style={{flexDirection:'row', alignItems: 'center'}}>
                    <Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/calendar.png')} />
                    <Text>{item.dateBuy}</Text>
                  </View>
                  
                  <View style={{flexDirection:'row', alignItems: 'center'}}>
                    <Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/coin.png')} />
                    <Text style={{fontWeight: 'bold'}}>{item.price}</Text>
                  </View>
                </View>
              </View>
            }
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

Answer 1

Try this:

<FlatList style={{ flex: 0 }}
          initialNumToRender={apps.length}

Or try: Try using flex: 1 in the listContainer styling, this should make it stay in the boundaries of your parent view.