To hide the navigation header on Press of a ButtonsetOptions({headerShown: false}); In this example, We will create a stack navigator with a single screen which will have a header and has a button to click.
UPDATE as of version 5
As of version 5 it is the option headerShown in screenOptions
Example of usage:
<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
If you want only to hide the header on 1 screen you can do this by setting the screenOptions on the screen component see below for example:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
See also the blog about version 5
UPDATE
As of version 2.0.0-alpha.36 (2019-11-07),
there is a new navigationOption: headershown  
      navigationOptions: {
        headerShown: false,
      }
https://reactnavigation.org/docs/stack-navigator#headershown
https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd
Old answer
I use this to hide the stack bar (notice this is the value of the second param):
{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}
When you use the this method it will be hidden on all screens.
In your case it will look like this:
const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);
    On v4 simply use below code in the page you want to hide the header
export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}
refer to Stack Navigator
Just add this into your class/component code snippet and Header will be hidden
 static navigationOptions = { header: null }
    In the given solution Header is hidden for HomeScreen by- options={{headerShown:false}}
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>
    
                If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With