CODEWITHSUNDEEP
react-nativereact-navigation
John Doah
John Doah

Reputation: 1999

Header on specific screen

I'm working on an application with React-Native. I'm using React-Navigation and In my login and register screens I don't want header to be shown. this is what I wrote and it is working:

const Stylelist = StackNavigator({
  Login: { screen: HomeScreen}, // when finish working on homescreen, change back to LoginScreen
  Register: { screen: RegisterScreen},
  Home: { screen: HomeScreen},
},{headerMode: "none"});

Now I'm working on my Homescreen and I want the home screen to have an header. How can I enable the header only on the home screen? I tried changing "headerMode: 'none'" position but it didn't work.

Upvotes: 1

Views: 1807

Answers (1)

Dan
Dan

Reputation: 8794

const Stylelist = StackNavigator({
  Login: { 
    screen: HomeScreen,
    navigationOptions: ({navigation}) => ({
      header: null,
    }),  
  }
  Register: { screen: RegisterScreen },
  Home: { screen: HomeScreen },
});

I have never used React Navigation but I took a look at the documentation and specifically StackNavigator which you can see here.

It states within the Stack Navigator Options section that you can pass a header which is a

React Element or a function that given HeaderProps returns a React Element, to display as a header. Setting to null hides header.

Upvotes: 3

Related Questions