React-native-navigation: [v2] [Android] Adding marginLeft or marginRight to rightButtons causes title to collapse

[harveyconnor]

Issue Description

When adding custom components as buttons on topBar->rightButtons, it causes the topBar to glitch and collapse the title.

Steps to Reproduce / Code Snippets / Screenshots

Both topBar and rightButtons were custom components. It did not appear to collapse when using a standard text component as the title.

topBar-->rightButtons (components)
topBar-->title (component)

---

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?): Poco F1 - LineageOS 16 (Debug)

[retyui]

---

[harveyconnor]

@retyui
Nah that's not it.

Here's what you should try, attempt to create a custom component for your right button, and a custom component for your title.

options: {
  topBar: {
      title: { 
        component: {} // Insert a custom title component here, obviously register it first and use the appropriate component name e.g. <View><Text>Title</Text></View>
      },
      rightButtons: [
        {
           id: '1',
           component: {} // Apply a marginRight to the component's root <View>
        },
      ],
   }
}

[retyui]

I update the example https://gist.github.com/retyui/16a275c8cb3c322dab4dd858515d457f
And here is the result:

[juddey]

I get the same behavior. RNN 2.8.0, RN 57.4 , Android Sim.

[harveyconnor]

@retyui yep, that's exactly what happens. iOS is completely fine. My solution was just to add

paddingRight: 10

instead of marginRight

[juddey]

@harveyconnor Did paddingRight exhibit strange behaviour for you?
I distinctly remember adding this attribute and what happened was that the element I had slid left and bumped up against the title...
kind of like a skater going across the ice, a nice effect but not what I was _really_ after. :wink:

[harveyconnor]

@juddey This is what I have:

container: {
    ...Platform.select({
      android: {
        paddingRight: 16,
        marginLeft  : 8,
      },
    }),
  },

On iOS the marginRight is in there natively

[juddey]

Hmmm.
Variation on your problem then:

[harveyconnor]

yeah that was the original issue I had

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

[juddey]

This is still an issue (2.17)

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

[juddey]

No no no no no stalebot, this is still a problem. :robot:

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

[stale[bot]]

The issue has been closed for inactivity.

[xxRockOnxx]

Still existing on 3.0.0