Question posted in 
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.
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 linenand 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 linenThird 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 continuesnonto 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,
},
})
`
2
Answers
Try adding
flexGrow: 1to your messageListContainer, like this:messageListContainer: { flexGrow: 1 }This should allow your FlatList to grow.
EDIT: Did some testing and, these new settings should work:
Add
flexDirection: "row"to your actionContainer and removedisplay: flexfrom your listingContainer – that, plus what I said earlier about flexGrow 1.If you add more items to your list, you’ll see that you’ll be able to scroll now within your FlatList.
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 stylesI 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.