FlatList not able to scroll to last bottom.

[suriya-hub]

Description

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.

` import { useRef, useState } from 'react';
import { Button, Text, TextInput, StyleSheet, FlatList, TouchableOpacity, View } from 'react-native'
import uuid from 'react-native-uuid';

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

`

Steps to reproduce

1. Install React Native and add my code to the app.jsx

React Native Version

0.75.3

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: (12) x64 13th Gen Intel(R) Core(TM) i5-13420H
  Memory: 1.77 GB / 15.70 GB
Binaries:
  Node:
    version: 20.11.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.4.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-241.19072.14.2412.12360217
  Visual Studio: Not Found
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

LOG  Running "todo" with {"rootTag":71}

Reproducer

https://github.com/suriya-hub/reproducer

Screenshots and Videos

No response

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[cortinico]

Please provide a valid reproducer @suriya-hub

[suriya-hub]

@cortinico Reproducer: https://github.com/suriya-hub/reproducer

[cortinico]

@suriya-hub your reproducer is empty:
https://github.com/suriya-hub/reproducer/blob/main/ReproducerApp/App.tsx

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[suriya-hub]

@cortinico Sorry, Now i am added the code.
Link: https://github.com/suriya-hub/reproducer/blob/main/App.tsx

Code in this Link: https://github.com/suriya-hub/reproducer/blob/main/src/screens/home.jsx

Thanks for guiding me!

[suriya-hub]

I dont know how but when i commanted the safeareaview it working as expected.

// <SafeAreaView style={[backgroundStyle]}> <Home /> </SafeAreaView>

[suriya-hub]

I found the solution here
https://snack.expo.dev/@kuba.baginski/hazardous-indigo-kiwi

[cortinico]

I found the solution here snack.expo.dev/@kuba.baginski/hazardous-indigo-kiwi

Closing then