I render some data in a FlatList. I am not able to scroll all data to the bottom end. some data are partially visible as you see in the screenshot. I am not able to scroll further and also I added my code.
My code:
export default function Home() {
const [data, setData] = useState(
[
{
"id": 1,
"label": "This is the label for item 1.\nIt continues on the second line."
},
{
"id": 2,
"label": "This is the label for item 2.\nIt continues on the second line."
},
{
"id": 3,
"label": "This is the label for item 3.\nIt goes to the second line\nand even a third line."
},
{
"id": 4,
"label": "This is the label for item 4.\nSecond line."
},
{
"id": 5,
"label": "This is the label for item 5.\nSecond line\nThird line."
},
{
"id": 6,
"label": "This is the label for item 6.\nAnother second line."
},
{
"id": 7,
"label": "This is the label for item 7.\nSecond line, third line."
},
{
"id": 8,
"label": "This is the label for item 8.\nSecond line."
},
{
"id": 9,
"label": "This is the label for item 9.\nAnother second line."
},
{
"id": 10,
"label": "This is the label for item 10.\nAnd it continues\nonto a third line."
}
]
);
return (
<>
<View style={styles.screenContainer}>
<TextInput
multiline
numberOfLines={4}
style={styles.input}
value={notes}
placeholder='Type a note..'
onChangeText={(text) => setNotes(text)}
/>
<View style={styles.actionContainer}>
<Button title='Add' onPress={() => handleAdd()} />
{notes.length > 0 && <Button title='Cancel' onPress={() => handleCancel()} />}
</View>
{data.length > 0 && <FlatList
data={data}
keyExtractor={item => item.id}
style={styles.messageListContainer}
initialNumToRender={data.length}
renderItem={(item) => (
<>
<View style={styles.listingContainer}>
<TouchableOpacity style={styles.messageList} onPress={() => [
setIdSaver(item.item.id),
handleEdit(item.item.label)]}>
<View>
<Text
multiline
numberOfLines={2}
style={styles.message}>{item.item.label}</Text>
</View>
</TouchableOpacity>
<View>
<Button title='X'
onPress={() => handleRemove(item.item.id)} />
</View>
</View>
</>
)}
ItemSeparatorComponent={() => <View style={styles.seperator} />}>
</FlatList>}
</View>
</>
)
}
const styles = StyleSheet.create({
screenContainer: {
padding: 10,
rowGap: 20
},
messageContainer: {
marginTop: 30,
},
messageList: {
paddingVertical: 10,
flexShrink: 1,
width: "100%"
},
messageListContainer: {
},
input: {
maxHeight: 100,
backgroundColor: "lightgrey"
},
listingContainer: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
gap: 10,
},
message: {
color: "black",
},
seperator: {
backgroundColor: "lightgrey",
height: 1,
},
actionContainer: {
rowGap: 5,
},
})
data.length > 0 && - there is no need for this check. Your FlatList will be empty if there is no data - just adds complexity.
You can delete <></> tags for your renderItem functions. This does nothing - just adds complexity.
It is better to use <FlatList /> rather than <FlatList></FlatList>. This is just good practise, less code and actually you do not pass child components to this tag.
This problem occurs because FlatList is being pushed off by styles in input component, button components and screenContainer: { padding: 10, rowGap: 20 } off the screen. FlatLists are dynamic so you have to be careful with adding too much at the beginning of creating / adding new styles
I changed { padding: 10, rowGap: 20 } to { padding: 10, rowGap: 20, flex:1 } this makes sure that your whole screen is properly adjusted to child components.
{notes.length > 0 && <Button title='Cancel' onPress={() => handleCancel()} />} this might result in pushing your FlatList again off the screen and just handle / prevent upload for empty values.
Working version might look like: Expo snack
I changed your structure a little bit. It is better to think about how your tags are structured rather than plastering your code with more styles, logic and praying it will work.