React-native: FlatList paddingBottom not working

[xahon]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.45.1

2. node -v:
   v7.10.1

3. npm -v:
   4.2.0

4. yarn --version:
   0.27.5

Then, specify:

• Target Platform: Android

• Development Operating System: Ubuntu 16.04Lts

• Build tools: Expo

Steps to Reproduce

1. Create a FlatList component with items
2. Add style with paddingBottom to FlatList
3. No padding after that

Expected Behavior

FlatList has empty space after last rendered item

Actual Behavior

FlatList has no space after last item

(Write what happened. Add screenshots!)

List in screenshot is scrolled to bottom

Simple issue, i think it not needs any other information

[pqkluan]

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.

[Shpadoinkle]

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} />}

[dotansimha]

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

[jgbaEmento]

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

[yasir-netlinks]

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)

[kirankalyan5]

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.

[fcostaprojects]

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

`

[hramos]

Closing due to workaround provided.

[pqkluan]

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 (ﾒﾟ皿ﾟ)

[hramos]

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

[rsp8055]

This code also helps to make the space at the footer in the flat-list or any list component
"
....
....
ListFooterComponent={ }

/>
"

[Haraldson]

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.

[riwu]

@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?

[hodgef]

@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.

[hramos]

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

[jimitpatel]

Work around is available but should also be able to work through styles.

[ogil7190]

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>

[steffodimfelt]

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!

[Moreno97]

The solution offered by @jgbaEmento is not always working, and it depends on the content. Another solution that is working for us is to remove all padding or margin from children/item and set that style to the item children (eg. if the children have a <Text> or a <View>, set the style to that).

[bill-pairaktaridis]

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

Works on Flatlist as well!

[JosuGZ]

The workaround helps but it is not intuitive and it does not completely solve the problem as the scrollbar don't touch the bottom.

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

If the issue is closed, it will be missed by people searching for something to work on.

[tungcao]

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.

Sorry, unrelated. How do you create the view with style?

[shubham1164]

Use this
ListFooterComponent={ }
/>

[johncurt]

When using an inverted FlatList, using contentContainerStyle={{paddingTop: xxx}} (instead of paddingBottom) works

[alexdant91]

Thanks @jgbaEmento, it work for me!