CODEWITHSUNDEEP
androidreact-nativereact-navigation
Irindul
Irindul

Reputation: 416

Different Headers in StackNavigator

I have implemented a StackNavigator in which I removed the header for styles purpose.

Now I have a Component inside the StackNavigator for which I'd like to get the header back. How do you reckon I do it ?

Here is my StackNavigator : 

const Nav = StackNavigator(
{
    SplashScreen: {screen: SplashScreen},
    Login: {screen: Login},
    Register: {screen: Register},
    Main: {screen: MainNav},
},
{
    headerMode: 'none',
});

But for the Register screen, I would like to have a header (to let the user know that he can go back).

I tried doing this : 

static navigationOptions = {
    title: 'Register',
    header: {

    }
}

But I don't quite know what to put inside the header part.

Upvotes: 0

Views: 737

Answers (1)

jaycee
jaycee

Reputation: 311

Personally what i did: I had set the height of the header to 0 when i didnt want it to show and to n to show it so i could do somenthing like height: condition ? 0 : 10

otherwise someone answered here

You can do it programmatically with the following code:

static navigationOptions = ({ navigation }) => ({   header:
> (navigation.state.params.thanks) => <HeaderView
> content={navigation.state.params.thanks} /> : null, })

And then you can set the state params with this:

componentWillMount() {   this.props.navigation.setParams({ thanks:"Something" }); }

Although I haven't tried the code myself and I'm not sure if something like the HeaderView is accessible for the public api in react-navigation and if there is a content property on that. But I think in an abstract way, this is how you set it programmatically.

I didn't try it either but it might work

Edit: the answer given in github is definitely better, you can import HeaderView from react-navigation and do header: condition ? HeaderView : null to show and hide it

Upvotes: 1

Related Questions