React-native-navigation: rightButtons in the topBar have no margin and backButton icon have the wrong direction on Android

[valin0k]

Issue Description

Hey guys! I have a few issues with topBar on Android. For some reason, rightButtons have no align and stick to the left side (i'm using RTL). And the second issue with the wrong direction of the custom backButton (the second issue appears only with RTL).

Steps to Reproduce / Code Snippets / Screenshots

// right button code:
<TouchableOpacity style={{backgroundColor: 'greenyellow'}}>
      <Image
        source={{ uri: 'question_gray', cache: 'default' }}
        style={{ width: 22, height: 22, alignSelf: 'center' }}
      />
    </TouchableOpacity>

// navigation settings
setDefaultNavigationOptions() {
  Navigation.setDefaultOptions({
    layout: {
      direction: rtl ? 'rtl' : 'ltr',
    },
    topBar: {
      background: {
        color: 'white',
      },
      noBorder: true,
      elevation: 0,
      backButton: {
        visible: true,
        showTitle: false,
        fontSize: 16,
        icon: {uri: 'back_button'},
        color: 'black',
      },
      rightButtons: [
        {
          id: 'app.Info',
          component: {
            name: 'app.Info',
          },
        },
      ],
    },
  });
}

---

Environment

• React Native Navigation version: ^7.0.0
• React Native version: ^0.63.2
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Android Emulator Nexus_5X_API_29_554

[jinshin1013]

@guyca Would definitely be interested in knowing whether having no default padding to the custom component for the right button.

[guyca]

I think this is an issue with Touchable components. Try wrapping the Touchable with a View (make sure it's using collapsable={false}) and adjust the views flex options.

[valin0k]

@guyca the same result when i'm wrapped Touchable into View

<View collapsable={false} style={{ flex: 1, display: 'flex', backgroundColor: 'greenyellow', alignItems: 'center', justifyContent: 'center' }}>
  <TouchableOpacity>
    <Image
      source={{ uri: 'question_gray', cache: 'default' }}
      style={{ width: 22, height: 22, alignSelf: 'center' }}
    />
  </TouchableOpacity>
</View>

[guyca]

The internal buttons container on Android doesn't have any padding or margin. If you set a regular button with an icon ( not a custom component) then it will be displayed correctly.

You should adjust your button's style according to the Material guidelines. From what I remember the Touchable should be 48 by 48 and the icon 24 by 24.

[guyca]

@jinshin1013 Thanks for looking into this! 🔥

[jinshin1013]

Yeah I figured using just a text or icon right button nicely position itself on the topbar. Cheers for the explanation!

[valin0k]

@guyca thank you for explaining! Can you advise something about the second issue with the wrong direction of the back button on Android when i'm using RTL mode?

      backButton: {
        visible: true,
        showTitle: false,
        fontSize: 16,
        icon: {uri: 'back_button'},
        color: 'black',
      },

[guyca]

Have two back icon versions, one for rtl and one for ltr.