Last item in React native flat list goes beyond screen

Question

I have a flatlist with some styles on the outer containers as follows.

<View style={containerStyle}>
 // more jsx components come here
  <View style={resultContainerStyle}>
    <FlatList
      data={results}
      keyExtractor={(item) => (item.id && item.id.toString())}
      renderItem={({ item, index }) => (
        <ListItem
          item={item}
          selectItem={selectItem}
        />
      )}
    />
  </View>
</View>

The issue is that the last values of the list go beyond the view of the screen and there is no way to view it unless a fixed height is put on the parent container. Is it possible to do this without a fixed height.

parent of FlatsList should have "flex:1" and try to add style to FlatList with "flex:1" — Mehran Khan, Dec 31 '19 at 12:59

score 1 · Answer 1 · answered Dec 31 '19 at 11:07

1

A SafeAreaView can be used to limit the view to the "safe" areas of the screen(avoiding the notch and curved bottom. Checkout the following example

<SafeAreaView style={containerStyle}>
 // more jsx components come here
  <View style={resultContainerStyle}>
    <FlatList
      data={results}
      keyExtractor={(item) => (item.id && item.id.toString())}
      renderItem={({ item, index }) => (
        <ListItem
          item={item}
          selectItem={selectItem}
        />
      )}
    />
  </View>
</SafeAreaView>

more examples can be found at the react native docs.

answered Dec 31 '19 at 11:07

MaartenDev

5,631
5
21
33

This issue isn't about the safe area. Even though i swap it in a safe area it keeps extending beyond the screen – Muljayan Dec 31 '19 at 11:10
It isn't entirely clear to me what you are trying to achieve. Should the items outside area be hidden? Does it fail to register clicks? – MaartenDev Dec 31 '19 at 11:14

Last item in React native flat list goes beyond screen

1 Answers1