react-native: FlatList paddingBottom not working

I added contentContainerStyle={{paddingBottom:xxx}} prop for extending the contentview. haven’t testet on Flatlist but works on SectionList

For the last item to be visible in FlatList I added this contentInset prop with a bottom value instead for paddingBottom. It worked like a charm.

<FlatList contentInset= {{bottom: 60}} />

It’s a prioritization matter due to the number of open issues. Happy to re-open if someone commits to opening a PR.

I solved this by using contentInset from scrollView;

<FlatList
	// ...
	contentInset={{ bottom: 16 }}
	inverted />

As I have an inverted list that scrolls to the bottom by default (chat), adding 16 pixels to the bottom weirdly applies it to the top, which is what I wanted as all my items have marginBottom applied.

I’m having trouble with this issue, after the research I found out that:

• This issue is dated way back to 2015. Related issues: #2914, #11367.
• The root of this issue belongs to ScrollView component.
• Since ListView, FlatList, Sections and VirtualizedList extend ScrollView they share the same issue.
• The reason why this issue still alive due to a work around by adding white space using renderFooter or putting paddingBottom inside contentContainerStyle prop. Which gives a similar result like paddingBottom from ScrollView style but actually not the same.

Flatlist with card effect:

<FlatList style={{ padding: 16 }} .../>

As you can see, the content container touch the Flatlist container without any spacing. Notice that the scroll indicator show that it hasn’t reached the bottom.

I have a theory about the cause of this bug. The actual scrollable area was determined using contentContainer offset + height, ignore any space between the content container and the container outside.

Use this <Flatlist ListFooterComponent={ <View style={{ margin: 50 }} /> } />

@hramos What’s the point of closing an issue if it hasn’t been fixed? I don’t see the goal of sweeping bugs under the carpet, other than to frustrate the developers using your product. It just doesn’t make sense from a bug tracking perspective.

I added contentContainerStyle={{paddingBottom:xxx}} prop for extending the contentview. haven’t testet on Flatlist but works on SectionList

Works fine in FlatList too. Thanks a lot!

@hramos the workaround you linked will not work properly for some cases. Eg.

const App = () => (
  <FlatList
    contentContainerStyle={{ padding: 100 }}
    data={[1, 2]}
    ItemSeparatorComponent={() => <View style={{ margin: 10 }} />}
    renderItem={() => <Button title="button" />}
  />
);

https://snack.expo.io/@riwu/flatlist-bottom-margin

The bottom button will not have the shadow styling on Android:

Wrapping Button with a View and adding margin to the View will be the correct workaround in this case.

I’m personally not affected too much by this bug since I’m aware of it and the workaround, but i feel sorry for the other thousands of developers who would have to waste their time figuring this out because a dev from RN decided that a workaround is a good enough solution to a bug.

Perhaps none of us here knows a good way to fix this bug, but shouldn’t the issue be left opened so that another more enlightened dev might be able to come up with a proper fix?

The reason why this issue still alive due to a workaround by adding white space using renderFooter or putting paddingBottom inside contentContainerStyle prop. Which will give a similar result like paddingBottom from ScrollView style but not the same.

Then you guy close it again without actually fix the root cause (ﾒﾟ皿ﾟ)

Hi there, I am using react native 0.50.4 I have somewhat a similar problem , I have been stuck for couple of days now

<View style={{flex: 1}}>
    <View style={{flexDirection: 'row'}}>
        <SearchBox />  // returns a TextInput
    </View>
    
    <FlatListComp />  //  returns a flatlist items
</View>

The <SearchBox /> pushes the FlatListComp down out the view screen. I can see the scrollbar indicator going down beyond the screen view, so some list items are hidden (the last 2 or 3 items in the list cannot be seen)

Try

1 => Add View in FlatList
2 => Define style height for View 3 => Get screen height on Dimensions function from React Native 4 => Adjust height in StyleSheet `

import {
  View,
  StyleSheet,
  Dimensions,
  FlatList
} from 'react-native';

<View style={styles.vwList}>
  <FlatList
   data={this.props.listData}
   keyExtractor={this._keyExtractor}
   renderItem={this._renderRow()} />
</View>

let { height } = Dimensions.get("window");

const styles = StyleSheet.create({
  vwList: {
    height: height - 250 //adjust
  }
});

`

For me it works with { flexGrow: 1, paddingBottom: 20} with 0.49.5

Hey guys,

Ran into the same problem today and just thought id post a work around for other who encounter it.

For some reason applying top or bottom padding to the flatList component creates this issue where it pushes the inner content down out of view for the amount you specified.

So the easiest way to tackle this is to apply either no padding at all, or only side padding. Use bottom padding/ margin on your inner list items items instead. And then pass an index through to your inner items so you can apply some top margin/padding to your first item.

ie: renderItem={({ item, index }) => <ListItem Index={index} event={item} />}

This problem of last 2 3 items not visible is maybe due to irregular size of Flatlist, wrap the Flatlist using a view and provide it a flex count to fix its size and now working like charm!

for ex: <View> <View style={{flex : 3}}> {some other view }} </View> <View style={{flex : 7}}> <Flatlist ... /> </View> // wrapped inside a view </View>

@pqkluan do you have a PR with a fix you’d like us to look at?