FlattList not scrolling all content - reactjs

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.