question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FlatList scrollToEnd ignores contentContainerStyle bottom padding

See original GitHub issue

If 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

  1. Run the app on android
  2. When the app loads, scroll to the very bottom of the flat list so you can see the 200px bottom padding
  3. 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:

https://github.com/mjmasn/FlatListScrollIssue

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
fabriziobertoglio1987commented, May 22, 2020

when you write not stale, I and others receive notification, we un-subscribe and the issue becomes stale

1reaction
mjmasncommented, May 23, 2020

🤷‍♂️ What can I say, my good friend stale bot disagrees with you…

stale bot removed the Stale label yesterday

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found