Skip to content

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

Open
@brsaylor2

Description

@brsaylor2

🐛 Bug Report

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

git bisect points to 3401467 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

brsaylor2@efd38fd

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions