[Android] topBar button icons show visual glitch when switching tabs

[brsaylor2]

🐛 Bug Report

topBar button icons are briefly shown at the wrong position when switching tabs on Android.

git bisect points to 34014674 as the commit where the problem started.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Create a tabbed layout by calling setRoot with a BottomTabs layout
2. Add leftButtons or rightButtons to the topBar via static options or setRoot, each button with an icon
3. Switch between tabs

Expected behavior

Button icons should be shown at the correct position

Actual Behavior

Immediately after switching tabs, the button icons are drawn at the wrong position very briefly, up and to the left. This is hard to screenshot but easy to see when switching tabs repeatedly.

Your Environment

• React Native Navigation version: 7.24.2
• React Native version: 0.66.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Android 10 device (debug + release), Android 11 simulator (debug)

Reproducible Demo

https://github.com/brsaylor2/react-native-navigation/commit/efd38fd24819ced097980998289d12d3714fa90d

I've added leftButtons and rightButtons to the first screen in the Playground app. Switch back and forth between tabs to see the glitch.

Are you willing to resolve this issue by submitting a Pull Request?

• ✖️   Yes, I have the time, and I know how to start.
• ✖️   Yes, I have the time, but I don't know how to start. I would need guidance.
• ✅   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

[swabbass]

It seems legit, thx for the sharp vision :], we will prioritize this issue, and it will be fixed soon

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[brsaylor2]

The bug is still present - updated demo: https://github.com/brsaylor2/react-native-navigation/commit/619c6626c25ec3e0ab2eb0d73dab29f16ddf83da

[Andarius]

Trying to fix this with https://github.com/wix/react-native-navigation/pull/7446