How to hide back button on ios with wix react native navigation

Question

I have been stuck on this problem all morning. I have read multiple GitHub issues and StackOverflow posts and nothing has worked.

I want to remove the blue back button in the top left of the below pic. I have noticed I am having trouble customizing the top bar altogether. I cannot add a title to the back button etc (this hint might indicate what is wrong).

Navigation.setRoot

Navigation.events().registerAppLaunchedListener(() => {
  Reactotron.log('5');
  Navigation.setRoot({
    root: {
      stack: {
        children: [{
          component: {
            id: STARTING_SCREEN,
            name: STARTING_SCREEN
          }
        }],
      }
    },
    layout: {
      orientation: 'portrait',
    },
  }).then(()=>Reactotron.log('7'));

Navigation.push

SplashScreen (root screen) -> AccessScreen (next screen).

Navigation.push(this.props.componentId, {
  component: {
    name: screen
  },
  options: {
    topBar: {
      backButton: {
        visible: false,
      }
    }
  }

It's almost as if I am specifying the backButton options in the wrong place.

Thank you for taking the time to comment. I don't understand why headerMode: "none" would help? Where would you put it? — jcgh582, Jun 27 '19 at 06:05
It shall be placed in the 'StackNavigator'.Because the Backward button is also in the header. — hong developer, Jun 27 '19 at 07:10

score 0 · Answer 1 · answered Jun 27 '19 at 04:15

0

A tricky workaround

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

the text: '' will keep a empty space, so will hide the button.

Actually not hide, but yea you can say that too.

You're good to go!!

answered Jun 27 '19 at 04:15

Akshay Mulgavkar

1,727
9
22

Thank you for taking the time to answer. I tried this and it didn't work. – jcgh582 Jun 27 '19 at 05:26
I updated the Navigation.push to contain your above code and it didn't work*. Is it meant to be in the Navigation.setRoot? – jcgh582 Jun 27 '19 at 05:27

score 0 · Answer 2 · answered Jul 24 '19 at 07:25

0

Use it but only working for ios

Navigation.setDefaultOptions({
    topBar: {
      backButton: {
        visible: false
      }
    },
})

or you can customize topBar

Navigation.push(this.props.componentId, {
  component: {
    name: screen
  },
  options: {
    topBar: {
      backButton: {
        background: YourComponent
      }
    }
  }

answered Jul 24 '19 at 07:25

Thịnh Phạm

21
2

Note my version react-native-navigation v3 but i ithink it works for v2 too – Thịnh Phạm Jul 24 '19 at 07:26

How to hide back button on ios with wix react native navigation

2 Answers2