[V2] Back icon and topBar button icon weird jumping

[davidbilik]

Issue Description

I've migrated to v2 version of the lib and the topBar icons behave weird on Android. Up/back icon appears later than title of the screen which makes title jump to the right. TopBar buttons are animating from the top which is not a nice animation and also on less performant device this animation is laggy which make it really unpleasant. I've tried to disable all animations that I thought can affect this but nothing helped.

I dont think that I can release it this way to my users :( but I dont want to ditch X hours of work that I've put into migrating. Any idea whats going on and how to fix? Thanks!

Steps to Reproduce / Code Snippets / Screenshots

I have app with bottomTabs and some simple styling applied which I don't think matters. On the attached video is what i am talking about. I am clicking on the right top button and then clicking on back button from the next screen. When top button is clicked, it performs Navigation.pop() to the second screen. Back icon has default behavior.

---

Environment

• React Native Navigation version: 2.13.1
• React Native version: 0.59.0
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Any device, any Android version

[harveyconnor]

#4875 Similar issue

[davidbilik]

Maybe but I dont use custom components

[pribeh]

Experiencing the same on 0.59 and 2.16.0

[sorin-f-wiredelta]

Environment

• React Native Navigation version: 2.16.0
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): PIXEL 2 Emulator , Android 8 SDK

Can confirm, experiencing the same problems with topBar icons and not with custom components. Here is a GIF I made to highlight the problem. BTW, the flashy red parts during this GIF is because of the video I made and not an issue with the app.

I noticed the problem after I made the upgrade from RNN 2.12.0 to 2.16.0.

[pribeh]

It almost looks like it was an added animation that doesn't really render properly and is too short to work effectively in that space. That's just a guess. I can't figure out what the cause of it is.

[aminosman]

Still seeing this in v 2.18.3, any update?

[davidbilik]

I've discovered whats causing buttons to jump weirdly, its this commit 54ff1cd Probably ActionMenuView has two phase positioning of its items and this "overflow" or clipChildren = false will display it's flaw. I will probably make my own fork of this lib and remove this line because I don't need badges or other views in my top bar buttons, but its not universal solution. It would be great to have some official support from the guy that made that commit @guyca to discuss it. Unfortunately, Back/Up icon still makes title to jump, dont know whats causing that yet

[stale]

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 Detox and report back. Thank you for your contributions.

[stale]

The issue has been closed for inactivity.

[kyryloz]

I've discovered whats causing buttons to jump weirdly, its this commit 54ff1cd Probably ActionMenuView has two phase positioning of its items and this "overflow" or clipChildren = false will display it's flaw. I will probably make my own fork of this lib and remove this line because I don't need badges or other views in my top bar buttons, but its not universal solution. It would be great to have some official support from the guy that made that commit @guyca to discuss it. Unfortunately, Back/Up icon still makes title to jump, dont know whats causing that yet

After removing enableOverflowForReactButtonViews(child); it definitely fixes the weird jumping. For future readers, instead of making your own fork to fix minor issues consider using patch-package package. It may be the quickest way to make a change to a third-party library.