FlatList scrollToEnd ignores contentContainerStyle bottom padding
See original GitHub issueIf you have a <FlatList /> (and possibly other scrolling views) with a contentContainerStyle of {paddingBottom: 200}, when scrollToEnd is called it scrolls to the bottom of the content, not to the bottom of the entire FlatList. So if you already scrolled to the very end (including padding), the FlatList will actually scroll back up to the bottom of the last item in the list.
React Native version:
System:
OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Memory: 585.51 MB / 15.54 GB
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 22, 24, 26, 27, 28, 29
Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3, 29.0.0
System Images: android-22 | Google APIs Intel x86 Atom_64, android-24 | Google APIs ARM 64 v8a, android-24 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
Android NDK: 17.1.4828580
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7
Steps To Reproduce
See https://github.com/mjmasn/FlatListScrollIssue
- Run the app on android
- When the app loads, scroll to the very bottom of the flat list so you can see the 200px bottom padding
- Now whenever scrollToEnd is called, the FlatList will scroll back up, ignoring the padding.
Describe what you expected to happen:
FlatList scrolls fully to the bottom, including the padding height.
Snack, code example, screenshot, or link to a repository:
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:13 (5 by maintainers)
Top Results From Across the Web
Spacing before and after a horizontal FlatList (React Native)
Seems like I was able to fix it by using a contentContainerStyle prop on the FlatList instead of passing it a style prop...
Read more >Usage | FlashList
If you are familiar with FlatList, you already know how to use FlashList ... You can use contentContainerStyle to apply padding that will...
Read more >react native flatlist padding bottom Code Example
Answers related to “react native flatlist padding bottom”. flatlist react native horizontal · react native flatlist horizontal scroll · react native ...
Read more >ScrollView
FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing...
Read more >Common bugs in React Native ScrollView and how to fix ...
FlatList exposes to us a long list of props that are designed for the ... The contentContainerStyle prop is a scrollable container inside ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

when you write
not stale, I and others receive notification, we un-subscribe and the issue becomes stale🤷♂️ What can I say, my good friend stale bot disagrees with you…
But in all seriousness this is still a valid issue so it needs to be kept open. The RN maintainers can decide what to do with it next time they do a triage. It’s probably a good first issue if someone wants to contribute.
I’m not in a rush to write a PR because I have other commitments and in most cases there’s an easy workaround.