Skip to content

(iOS & Android) - Bottom tab blank page glitch (rn81) (animation+detachInactiveScreen) #3824

@ACHP

Description

@ACHP

Description

Hi,
I've recently upgraded my react native app from 0.79 to 0.81 and I've noticed some bugs with the bottom bar + detachInactiveScreen options + animation option.

The bugs is that when I switch tabs, sometime, the screen is empty/blank.

It has already been reported in react-navigation, but it has been tagged "react-native-screen" which makes me think it won't be solved anytime soon :) (Also I guess this is really a react-native screen bug since the bug only appear with detachInactiveScreen=true)

react-navigation/react-navigation#12755

I've been able to reproduce it in a fresh new app:

blanc.tab.screen.bug.mov

You can find a demo app with the bug here:

https://github.com/ACHP/react-native-screen-empty-tabs-bug

I've tried with rn-screen 4.16.0, 4.23.0 and 4.24 …

Some early investigation:

We can see the screen is mounted

Image

But when I use xCode view debugging

Image

Steps to reproduce

  1. You can clone https://github.com/ACHP/react-native-screen-empty-tabs-bug
  2. Run it on iOS
  3. play with the tabs and the Scrollview a little, (scrolling a ScrollView, and switching tabs right after is the most effective way to reproduce the bug I think),

Snack or a link to a repository

https://github.com/ACHP/react-native-screen-empty-tabs-bug

Screens version

4.24.0

React Native version

0.81.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    platform:iosIssue related to iOS part of the libraryrepro-providedA reproduction with a snack or repo is provided

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions