Flatlist not scrolling all the way, or at all - react-native

Question

Flatlist wont scroll at all. I have looked at other answers but to no help.
If i comment out flexDirection and justifyContent in the "container" style in Item.js, it scrolls a little bit but still not all the way. Also if i have to comment these out i dont know how i can make the button stick to the right side.
App.js
return (
<View>
<View>
<FlatList
data={list}
renderItem={({item}) => (
<Item deleteFunction={deleteItem} content={item}/>
)}
/>
</View>
</View>
)
Item.js:
import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
export default function Item({content, deleteFunction}) {
return (
<View style={styles.container}>
<Text style={styles.text}>{content.name}</Text>
<TouchableOpacity onPress={() => deleteFunction(content.key)} style={styles.touch}>
<Text style={styles.button}>
X
</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container:{
// padding: 10,
borderBottomWidth: 1,
borderColor: "black",
marginHorizontal: 60,
marginBottom: 15,
flexDirection: "row",
justifyContent: "space-between",
},
touch: {
paddingHorizontal: 20,
// backgroundColor: "pink"
},
text:{
paddingVertical: 10,
maxWidth: 240,
},
button:{
color: "red",
paddingVertical: 10,
maxWidth: 200
}
})

Answer 1

Add bottom padding to the view file in the App.js
return (
<View>
<View style={{bottomPadding: 20}}>
<FlatList
data={list}
renderItem={({item}) => (
<Item deleteFunction={deleteItem} content={item}/>
)}
/>
</View>
</View>
)
This might work.