Bug UI when navigate around on iOS 14.6 and prefer cross-fade Transitions enable (accessibility -> motion -> reduce motion enable, prefer cross-fade Transitions enable)

[viet97]

Current behavior

On ios 14.6, prefer cross-fade Transitions enable in setting, serious ui bug occurred when navigate between screens. See video:
https://drive.google.com/file/d/1DdTdZ5i5wLOYeJ-OxiO6LXjmDuhfWZGT/view?usp=sharing

This is a very serious UI BUG on ios 14.6. please check it as soon as posible. Thanks team!

Expected behavior

navigate between screens smoothly without any bug UI.

Reproduction

On ios 14.6, go to setting ->acessibility -> motion -> enable reduce motion -> enable prefer cross-fade Transitions, when navigate to another screen and go back, the UI become buggy and sometime screen just show a blank white space.

Platform

• iOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/stack

Environment

package	version
@react-navigation/native	5.9.4
@react-navigation/bottom-tabs	5.11.11
@react-navigation/stack	5.14.5

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/bottom-tabs (found: 5.11.2, latest: 5.11.11)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[nkhanhng]

I'm facing this issue in 14.6 too, please help

[sonseven5997]

Im facing this issue in 14.6 too please help ….

[lukeharvey]

Looks like this could be an issue with React Native and not with React Navigation, see here facebook/react-native#29974 a possible workaround is provided in that thread

[viet97]

Looks like this could be an issue with React Native and not with React Navigation, see here facebook/react-native#29974 a possible workaround is provided in that thread

thank man

[gaupoit]

Count me in. Please help to resolve it. Cheers.

[viet97]

Turned out it was a KeyboardAvoidingView bug. Close this issue as lukeharvey've gave a solution.