StackNavigator inside TabNavigator add headerRight button

Question

I am unable to add a headerRight button to my component.

I have a StackNavigator:

const profileNavigator = StackNavigator({
Profile: {
    screen: PFProfileAuthenicate,
    navigationOptions: {
        title: 'Profile',
        headerTintColor: 'white',
        headerStyle: {
            backgroundColor: Colors.primaryInput
        }
    }}
});

inside of a TabNavigator:

const iosTabs = TabNavigator({
Profile: {
    screen: profileNavigator,
    navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({tintColor}) => (
            <Image
                source={require('../assets/face.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        )
    }
} [...other tabs]
}, {
tabBarPosition: 'bottom',
});

The authenticator component is just rendering this:

render() {

    if (this.props.authStore.isLoggedIn)
        return <PFProfile navigation={this.props.navigation}/>;
    else
        return <PFLogin/>;
}

I am trying to add a right save button to the header in the PFProfile component. I've tried this and everything else I can find.

I'm thinking it has something to do with how the component in question isn't actually defined in navigator but nothing I've tried has been able to make this work.

I'm new to all this. Am I setting everything up right? Is that the best way to render the login vs. the profile? Any help would appreciated.

One hacky way can be to use headerMode: 'none' in your Profile stack and then put a header View manually at the top of PFProfile component — Mukesh Soni
– Mukesh Soni, Commented Apr 3, 2018 at 21:50
@PritishVaidya I've edited my question, I can't add a button or menu to the nav bar in my stacknavigator — MayNotBe
– MayNotBe, Commented Apr 5, 2018 at 16:01
@PritishVaidya - thanks for your answer. I'm still new to all this, I'm using Mobx so I'm looking into a Mobx solution like you describe. I've confirmed that the problem is when I use the conditional to render <PFProfile> then <PFProfile> has no navigation prop (except the one I pass to it and that one doesn't recognize the navigationOptions when I declare it in PFProfile. I wish there was a way to just replace the <PFLogin> with <PFProfile> in the render when the auth prop returns true. — MayNotBe
– MayNotBe, Commented Apr 5, 2018 at 20:32

MayNotBe · Accepted Answer · 2018-04-06 03:19:53Z

1

Just gonna put this out here and y'all can tell me if it's totally off the wall:

You see above how I passed the navigation object from PFProfileAuthentication to PFProfile?

Well, in PFProfile I do this (and it works):

constructor(props)
{
    super(props);
    if (this.props.navigation.state.routeName === 'ProfileAuthenticator') {
        this.props.navigation.replace('Profile');
    }
}

Now PFProfile is in the stack and my navigationOptions are applied to the header so my button shows up.

answered Apr 6, 2018 at 3:19

MayNotBe

2,1403 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pritish Vaidya Over a year ago

Looks fine, as long as it helps you solve your problem, I'm am unclear about the navigation structure and the components layout, therefore I've decided to delete my answer.

Collectives™ on Stack Overflow

StackNavigator inside TabNavigator add headerRight button

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related