How to hide header in react navigation?

Question

I am trying to hide the header in the React-native app. As far as I know, there are several ways to hide header in stack navigator.

const NavigatorsContainer = createStackNavigator({
  App: {
    screen: BottomTabStack,
    navigationOptions: {
      headerShown: false
    }
  },
  General: {
    screen: GeneralStack,
    navigationOptions: {
      headerShown: false
    }
  }
})

Then which case can I use the following method?

  General: {
    screen: GeneralStack,
    navigationOptions: {
      headerShown: false,
      //header: null,          //-- ?
      //headerMode: 'none',    //-- ?
      //headerVisible: 'none'  //-- ?
    }
  }

What is the difference between each other?

Answer 1

To disable header for a particular screen, (I suppose GeneralStack in your case), use this in that particular screen component .js file!

GeneralStack.navigationOptions=()=>{
    return {
        header:()=>null
    };
};