滚动视图不适用于页面中的更多元素

我正在尝试制作一个列出游戏列表的应用程序（出于教育目的），但是ScrollView中存在问题。他们只是不滚动所有内容。我发现，如果删除输入和按钮，则一切正常。

我的代码：（我删除了功能以使代码最少化。该功能仅从API获取数据并存储在apps数组中）

import React from 'react';
import { Button, Image, SafeAreaView, ScrollView, 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, flex: 1}}>
      <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" />

        <ScrollView style={{marginTop: 32}}>
          {apps.map((item, key) => (
            <View key={key} style={{alignItems: 'center', marginBottom: 32}}>
              <Image style={{width: "100%", height: 200}} source={{ uri: item.image}} />
              <Text style={{fontSize: 20}}>{item.name}</Text>
            </View>
          ))}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

这是两个屏幕截图，一个带有输入，另一个没有

输入的屏幕截图：

没有输入的屏幕截图：