Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

White flash on tab change with @react-navigation/bottom-tabs #1645

Closed
gkueny opened this issue Nov 21, 2022 · 11 comments · Fixed by #2188
Closed

White flash on tab change with @react-navigation/bottom-tabs #1645

gkueny opened this issue Nov 21, 2022 · 11 comments · Fixed by #2188
Assignees
@kkafar @alduzy
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided

Comments

@gkueny
Copy link

gkueny commented Nov 21, 2022 •
edited
Loading

Description

When I'm using @react-navigation/bottom-tabs with the native stack navigator, I see a white flash on tab transition in IOS.

If I replace @react-navigation/native-stack by @react-navigation/stack, white flash disappear.

I think it can be related to #1276 but I'm not sure we talk about the same issue.

issue-native-stack.mp4

Steps to reproduce

  1. Get Minimal reproduction repo https://github.com/gkueny/native-stack-flash-issue-reproduction
  2. Install dependencies
  3. Run APP
  4. Navigate between tab screen

Snack or a link to a repository

https://github.com/gkueny/native-stack-flash-issue-reproduction

Screens version

3.20.0 & 3.29.0

React Native version

0.69.7 & 0.73.6

Platforms

iOS

JavaScript runtime

No response

Workflow

React Native (without Expo)

Architecture

No response

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes
@github-actions github-actions bot added Repro provided A reproduction with a snack or repo is provided Platform: iOS This issue is specific to iOS labels Nov 21, 2022
@kkafar
Copy link
Member

kkafar commented Nov 29, 2022

Hi @gkueny, would you mind confirming whether this issue appears on iOS 15.x?
There've been quite a few issues recently, that are specific to iOS 16 and are caused by internal system changes. Would like to know if it is the case.

@kkafar kkafar self-assigned this Nov 29, 2022
@gkueny
Copy link
Author

gkueny commented Nov 29, 2022

Hi @kkafar ,

I can confirm that I reproduce the issue in iOS 15.5 (simulator)

@kkafar
Copy link
Member

kkafar commented Nov 29, 2022

Thank you, I'll look into this

@techgerm
Copy link

We're experiencing the same issue. Any update?

@gkueny
Copy link
Author

gkueny commented Mar 15, 2023

@techgerm not on my end. I update the minimal reproduction repo with latest version of @react-navigation/* & react-native-screens but with no luck

@cam-shaw
Copy link

I get this issue as well. Wonder if it's related to this conversation where "flickering" is discussed? react-navigation/react-navigation#11285

@Sumit2202
Copy link

Facing this same issue

@Sumit2202
Copy link

@kkafar has there been any moment on this issue so far?

@Lakston
Copy link

Lakston commented May 22, 2023

Curious about this also, same setup, ios, botom navigator and latest version of native screens

@gkueny
Copy link
Author

gkueny commented Feb 27, 2024

I updated minimal reproduction with latest version of each lib & latest version of react-native : gkueny/native-stack-flash-issue-reproduction@46045f1

Issue is still present

@alduzy alduzy self-assigned this Jun 17, 2024
@alduzy
Copy link
Member

alduzy commented Jun 17, 2024

I can confirm the issue is reproducible on Paper architecture, Fabric works fine.

@alduzy alduzy mentioned this issue Jun 17, 2024
Merged
2 tasks
@alduzy alduzy closed this as completed in b4aa349 Jul 9, 2024
alduzy added a commit that referenced this issue Jul 9, 2024
@alduzy @kkafar
fix(iOS): white flash on tab change when using native stack (#2188)
c5cd87a 
This PR gets rid of undesired white flashes during
`maybeAddToParentAndUpdateContainer`. The white flash was present on
paper architecture when `unmountOnBlur` option was set to true on parent
bottomStackNavigator (see repro).

The affected logic was previously introduced or changed by following
PRs:
- #600
- #613
- #643

The removed `_hasLayout` was initially added by
#600 in
order to resolve an issue:
#432.
However the logic was later changed by
#613 in
order to fix another issue and the added `_hasLayout` may not fix
anything eventually, as stated by [this
comment](#432 (comment)).

Fixes #1645.

- removed `_hasLayout` variable
- added repros

https://github.com/software-mansion/react-native-screens/assets/91994767/226a32d7-728b-48dd-b21a-6a1e4195add2

https://github.com/software-mansion/react-native-screens/assets/91994767/32febcf1-d159-4a9d-ae3a-373042732a6d

- added `Test1645.js` repro to test examples
- added `Test432.tsx` repro to test examples

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

---------

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>
ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this issue Oct 9, 2024
@alduzy @kkafar @ja1ns
fix(iOS): white flash on tab change when using native stack (software…
757ee4c 
…-mansion#2188)

## Description

This PR gets rid of undesired white flashes during
`maybeAddToParentAndUpdateContainer`. The white flash was present on
paper architecture when `unmountOnBlur` option was set to true on parent
bottomStackNavigator (see repro).

The affected logic was previously introduced or changed by following
PRs:
- software-mansion#600
- software-mansion#613
- software-mansion#643


The removed `_hasLayout` was initially added by
software-mansion#600 in
order to resolve an issue:
software-mansion#432.
However the logic was later changed by
software-mansion#613 in
order to fix another issue and the added `_hasLayout` may not fix
anything eventually, as stated by [this
comment](software-mansion#432 (comment)).

Fixes software-mansion#1645.

## Changes

- removed `_hasLayout` variable
- added repros

## Screenshots / GIFs

### Before


https://github.com/software-mansion/react-native-screens/assets/91994767/226a32d7-728b-48dd-b21a-6a1e4195add2

### After


https://github.com/software-mansion/react-native-screens/assets/91994767/32febcf1-d159-4a9d-ae3a-373042732a6d

## Test code and steps to reproduce

- added `Test1645.js` repro to test examples
- added `Test432.tsx` repro to test examples

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

---------

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkafar kkafar

@alduzy alduzy

Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(iOS): white flash on tab change when using native stack software-mansion/react-native-screens
7 participants
@cam-shaw @gkueny @Lakston @techgerm @Sumit2202 @kkafar @alduzy