Remove back button to sibling stack in react native

Question

I am trying to remove the header (see image) on sibling navigators.

I have a stackNavigator like so:

const navigator = createStackNavigator({
  'route': RouteComponent,
  'sibling1': Sibling1Navigator,
  'sibling2': Sibling2Navigator,
},
{
  ...defaultNavigationOptions,
  // @ts-ignore
  headerLayoutPreset: 'center',
  headerMode: 'screen',
})

sibling1Navigator looks like this:

    const Sibling1Navigator = createStackNavigator(
  {
    'route1': Route1Component,
    'route1': Route2Component,
    'route3': Route3Component,
  },
  {
    transitionConfig: HorizontalSlideTransitionConfig,
    navigationOptions: ({ navigation: { goBack, state, navigate } }) => {
      return {
        headerTransparent: true,
        headerStyle: {
          backgroundColor: '#FFF0',
        },
        headerLeft: (
          // tslint:disable-next-line
          <Button />
        ),
      }
    },
  },
)

I use a header on route to show a title but on routes route1 or route2 I don't want the back to page (like image).

I am using react-navigation: ^2.17.0

I have seen lots of examples of how to do this. the simplest would be to add the config to each page. I have had a look at all the answers on this question similar question but I was hoping there was something I could do with the stackNavigators. Is there another way of doing it or does it have to be done inside of the component?

Answer 1

You can hide the header by setting header style height and width to zero in React Navigation,

eg:

const SignInStack = createStackNavigator({
    sign: { screen: SignIn, 
        navigationOptions: {
            headerStyle: {
                height: 0,
                width: 0,
            },
        },
       },
});

or

const SignInStack = createStackNavigator({
        sign: SignIn,
    }, 
    {
        navigationOptions: {
            headerStyle: {
               height: 0,
               width: 0,
            }
       }
    }
);

Answer 2

I worked this out by following the docs on from A tab navigator contains a stack and you want to hide the tab bar on specific screens

I split my navigators up as per the docs said is the recommended way of doing it.

Here is my new code to give the example of what I did.

    const navigator = createStackNavigator({
  'route': RouteComponent,
},
{
  ...defaultNavigationOptions,
  // @ts-ignore
  headerLayoutPreset: 'center',
  headerMode: 'screen',
})

const ParentNavigator = createStackNavigator({
  'Another route': AnotherNavigator,
  'sibling1': Sibling1Navigator,
  'sibling2': Sibling2Navigator,
}, {
  headerMode: 'none',
  navigationOptions: ({ navigation: { goBack, state, navigate } }) => {
    return {
      tabBarVisible: false,
    }
  },
})

So in the parent stackNavigator I remove the header I can also remove tabBar as well.

Hope this helps anyone looking for the same question I had.