react-navigation / react-navigation/react-navigation

SectionList (ScrollView) render empty white content when navigate right before stopping transition with react-navigation

Open
#8,789 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug package:bottom-tabs
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

Original issue here:
https://github.com/facebook/react-native/issues/29819

Description

SectionList (ScrollView) renders empty white content when do navigate right before stopping transition.
Each tab as 1 stack of react-navigation

Please see the attached video & reproduction steps below for more details:

Steps To Reproduce

It's simple as follow:

  1. Create react-navigation stack, I use this code to create it: 
    createBottomTabNavigator(
  {
    News: {....},
    Finance: {....},
    Utils: {....},
    Books: {....},
    User: {....},
  },
  options
 );
  2. User stack has 1 scroll view, you scroll it down
  3. Right before scrolling finish, Press Utils menu bar to navigate to Utils stack (Or anywhere other than current route)
  4. Go back to User route, you see the SectionList (ScrollView) is now rendered as empty

Expected Results

Content must be visible

Snack, code example, screenshot, or link to a repository:

Screenshot video

React Native version:

System:
    OS: macOS 11.0
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 33.61 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node
    Yarn: 1.23.0-20200615.1917 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.6.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
      Android NDK: 19.2.5345600
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_171 - /usr/bin/javac
    Python: 2.7.17 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: mobiletechvn/react-native#v0.63.2.fix-shadow-node => 0.63.2

@react-navigation/native@3.6.5

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the described createBottomTabNavigator setup, a scrolled SectionList or ScrollView, and navigation during the transition. Compare the User route before and after returning from Utils; done means the SectionList content remains visible after navigation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.