React Native Flatlist last data not visible

Question

I render some data in 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.

Please See screenshot

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, }, })

`

Answer 1

• 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.