Search code examples
cssreactjsreact-nativestylingreact-native-flatlist

Last item of FlatList trimmed from bottom


I am displaying a FlatList with variable number of items and the last item always is not visible completely (border bottom).

enter image description here

render()

render() {
    return (
      <View style={styles.container}>
        <FlatList style={styles.list} containContainerStyle={{paddingBottom: 20}}
          ...
        />
      </View>
    );
  }

CSS

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },
list: {
   flex: 1,
   width: "95%"
}

Solution

  • You are using a wrong style property for the flat list, it is contentContainerStyle not containContainerStyle. You will have to increase it according to the size of your item.

    <FlatList contentContainerStyle={{ paddingBottom: 20}} />