Ggtcf

I'm trying to switch screen using both stack and tab navigator.

const MainNavigation = StackNavigator(
 otp: screen: OTPlogin ,
 otpverify: screen: OTPverification,
 userVerified: 
 screen: TabNavigator(
 List: screen: List ,
 Settings: screen: Settings 
 ),
 ,
 );

In this case stacknavigator is used first and then tabnavigator. and i want to hide headers of stack navigator. WIt is not working properly when i use navigationoptions like::

navigationOptions: header: visible: false 

i'm trying this code on first two components which are using in stacknavigator.
if i use this line then getting some error like::

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,
 
 
);

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 

If you want to hide on specific screen than do like this:

// create a component
export default class Login extends Component<> 
 static navigationOptions = header: null ;

If your screen is a class component

static navigationOptions = ( navigation ) => 
 return 
 header: () => null
 

code this in your targeted screen as the first method (function).

If someone searching how to toggle header so in componentDidMount write something like:

 this.props.navigation.setParams(
 hideHeader: true,
 );

When

static navigationOptions = ( navigation ) => 
 const params = = navigation.state;

 if (params.hideHeader) 
 return 
 header: null,
 
 

 return 
 headerLeft: <Text>Hi</Text>,
 headerRight: <Text>Hi</Text>,
 headerTitle: <Text>Hi</Text>
 ;
;

And somewhere when event finish job:

this.props.navigation.setParams(
 hideHeader: false,
);