Hide header in stack navigator React navigation

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 }