React-native-navigation: [V2] Unable to hide backButton

[andresfcamacho]

Issue Description

I'm unable to hide the backButton on the topBar. I don't want to make the entire topBar visible:false as suggested here: https://github.com/wix/react-native-navigation/issues/3826 as I want some rightButtons.

Steps to Reproduce / Code Snippets / Screenshots

I tried this:

options: {
        topBar: {
          backButton: { }
        }
      }

But the button was still visible and worked. As a hack/workaround I can do this as my top bar is white:

      options: {
        topBar: {
          backButton: { color: '#ffffff' }
        }
      }

But its not ideal since the buttons is still there just not visible. I would have expected backButton: {} to clear it out.

---

Environment

• React Native Navigation version: 2.0.2641
• React Native version: 0.57.0
• Platform(s) (iOS, Android, or both?): IOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[andresfcamacho]

I guess its possible to Navigation.setRoot as well but then you lose the slide effect.

[jinshin1013]

If you look at the documentation, there is a style option for backButton. Link.
You can do:

topBar: {
    backButton: {
        visible: false
    }
}

[stokesbga]

Doesnt look like this works in 2.2.0 on iOS

[thinklinux]

A workaround

        leftButtons: [
          {
            id: 'something',
            text: '',
          },
        ],

[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.

[L-Yeiser]

This is still an issue.

[kiroukou]

I second this request, this is quite a big issue. Current state: it does work on IOS but not on Android.

[L-Yeiser]

@kiroukou as a work around I added backgroundColor: ' transparent'.

[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.

[L-Yeiser]

still an issue

[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.

[L-Yeiser]

still an issue

[X-Tender]

Damn, I thought to find a solution on this issue here :/
The workaround with the empty leftButton is no solution because it leave the gap on the left side.

[ajmalsalim]

As @thinklinux mentioned, this workaround is working fine:

leftButtons: [ { id: 'something', text: '', }, ],

The thing is you need to use this when you are pushing the screen and not in mergeOptions

[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.

[bitcrumb]

This is still an issue.

[Findiglay]

Can confirm the following does not work on Android.

backButton: {
   visible: false,
},

[JunoVW]

Seems to be an issue still.

[SudoPlz]

Still an issue, I don't know what's going on with wix but this is SOOO sooo bad man.
Feels like this library has ben left to rot, all the issues get closed after months of existence without anyone ever taking a look at them, and this just hurts the wix brand I think.

I believe the way to go is start looking for maintainers for this repo..

[keremcubuk]

I'm using RNN 6.6.2 issue still not fixed. Any updates about this problem? @guyca

[zabojad]

Still not fixed on Android and RNN v6.10.1. Still having this issue since v2...

Please reopen!

[guyca]

Hey @zabojad
I've tried hiding the back button in the Playground app both in static and merge options. Both seem to work as expected on Android.

Hiding the back button with mergeOptions

<Button
  label="Hide back button"
  onPress={() => {
    Navigation.mergeOptions(this, {
      topBar: {
        backButton: {
          visible: false,
        },
      },
    });
  }}
/>

Hiding the back button with static options

  static options(): Options {
    return {
      topBar: {
        backButton: {
          visible: false,
        },
      },
    };
  }

If this is still an issue - please open another issue and provide a reproduction. Thanks and sorry for the inconvenience.