RightButtons jumps on Android

[idutka]

What happened?

When the icon is used for rightButtons inside topBar, it jumps when the new screen is pushed/popped in the stack.

Note: If a custom component is used for the button, the button doesn't jump.

What was the expected behaviour?

The RightButton with the icon should not jump during navigation.

Is there any solution for this other than using a custom button? A custom button adds unnecessary complexity.

Was it tested on latest react-native-navigation?

• [X] I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

It can be reproduced with Playground app. Just add the icon and use Push navigation.

export default class PushedScreen extends NavigationComponent<Props> {
  static options(): Options {
    return {
      topBar: {
        testID: PUSHED_SCREEN_HEADER,
        title: {
          text: 'Pushed Screen',
        },
        rightButtons: [
          {
            id: 'singleBtn',
            text: 'single',
            testID: TOP_BAR_BTN,
            icon: require('../../img/navicon_edit.png'), // Add icon
          },
        ],
        backButton: {
          testID: BACK_BUTTON,
          enableMenu: false,
        },
      },
    };
  }
...

In what environment did this happen?

React Native Navigation version: React Native version: Has Fabric (React Native's new rendering system) enabled: (yes/no) Node version: Device model: Android version:

[d4vidi]

@idutka the issue seems easy to reproduce. I'm working on tracking down the source - seems I have a lead.

[d4vidi]

Fix released in v7.38.4