CODEWITHSUNDEEP
react-nativereact-navigation
NyaSol
NyaSol

Reputation: 567

Header and Navigation-tab on a react-native application

enter image description here enter image description here

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.

Upvotes: 0

Views: 50

Answers (1)

Muhammad Mehar
Muhammad Mehar

Reputation: 1055

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.

Upvotes: 1

Related Questions