Header and Navigation-tab on a react-native application - react-native

Question

I'm building my first react-native application, and I encountered a problem I could not solve.
on the home screen, I don't want any header, and on the other pages, I would like to keep the navigation option.
I want to build a simple home page, with I buttons sign-up and login, the problem is I can't hide the first header on any of the app pages, i dont know if the problem is in the header, or maybe in some other component?
please review the code below.
class HomeScreen extends React.Component {
static navigationOptions = {
header:null,
headerVisible:false
}
render() {
return (
<ImageBackground source = {backgroundImage} style = {styles.backgroundImage}>
<View style = {styles.container}>
<View style = {styles.btn_login}>
<Button title = "SIGNUP NOW" color='#69428F' onPress ={this._showSignUpPage}/>
</View>
<View style = {styles.btn_signup}>
<Button title = "LOGIN" color='#AAA3A3' onPress = {this._showLoginPage}/>
</View>
</View>
</ImageBackground>
);
}
class SignupScreen extends React.Component{
// this hides the navigation, and i cannot see the navigation
// static navigationOptions = {
// header:null,
// }
render(){
return (
<View style={styles.container_Signup}>
<Button title="SignupScreen"/>
<StatusBar barStyle="default" />
</View>
);
}
}
const AppStack = createStackNavigator(
{
Home:{
screen:HomeScreen,
navigationOptions:{
header:null
}
},
SIGNUP:SignupScreen,
LOGIN:LoginScreen
},
{
navigationOptions :{
header:null
}});
as you can see, I tried placing the header:null inside the class, and inside the stackNavigator, but nothing seems to work.

Answer 1

Try to set header mode none as follow:
const AppStack = createStackNavigator( {
Home:{
screen: HomeScreen,
navigationOptions: {
header: null
}
},
SIGNUP: SignupScreen,
LOGIN: LoginScreen
}, {
headerMode: "none"
});
I hope it help you.