React navigation passing function to a stack navigator and then a header component

Question

I have an expo react native app with react-navigation v3.

I am passing a signOut function from my main App to a header component of one of my stack navigators. I want to pass this header once so I don't want to add it to the navigationOptions for every screen.

I'm having trouble accessing the props in my MainStackNavigator and passing the function down to my component.

Main App

 render () {
        return (
            <View style={styles.container}>
                <AppNavigator screenProps={{ signOut: this.signOut }}/>
            </View>
        );
    }

AppNavigator

export default createAppContainer(
    createSwitchNavigator({
        // You could add another route here for authentication.
        // Read more at https://reactnavigation.org/docs/en/auth-flow.html
        Main: MainStackNavigator,
    },
    {
        initialRouteName: 'Main'
    })
);

MainStackNavigator

export default createStackNavigator({
    Home: { 
        screen: HomeScreen, 
    }
},{
    initialRouteName: 'Home',
    defaultNavigationOptions : {
        headerTitle: <LogoTitle signOut={this.screenProps.signOut}/>,
        headerMode: 'screen',
    }
});

So when I am passing in the component LogoTitle, how do I access the screenProps at this point?

can you please check this out : headerTitle: (props) => <LogoTitle signOut={props.screenProps.signOut}/> — Aniruddha Shevle
– Aniruddha Shevle, Commented Nov 28, 2019 at 8:21

thecodrr · Accepted Answer · 2019-08-29 16:19:17Z

2

I don't think you can access the screenProps in a createStackNavigator function. There's actually no point in passing it as screenProps because screenProps are accessible in screens/views not Navigators. Moreover, there's no screenProps prop in AppNavigator.

The correct way to do this would be through a signOut function that's defined in an auth.js file and accessible from everywhere. If you want to react to user's sign out then use redux and update the state and react to that update instead.

edited Aug 29, 2019 at 16:19

answered Aug 29, 2019 at 16:13

thecodrr

2751 gold badge3 silver badges13 bronze badges

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

1 Comment

Adam Over a year ago

I think I'll give redux a go

windmaomao · Accepted Answer · 2019-08-29 16:31:20Z

2

Passing something around in react is very typical task, before showing you the answer, we need to understand react doesn't like things injected out of nowhere, by default, you need to pass it to the children. Most of time, this means if you have a problem, you actually have a problem of parent-children relationship, either going up or down.

So in order to solve your problem in a bit generic way, you could consider passing a function that could change your screenProps, not screenProps, unless screenProps is always read only from the children point of view.

There's quite a bit way to achieve that. I'm only showing you one way via hooks

  const [props, setProps] = useState({ default props })
  return (
    <ChildrenComp onChange={setProps} />
  )

From now one, your children can always change props whenever they want via onChange.

And now we're back to the old things, which is passing props to children where you need them.

I'm not a fan of redux for simple problems, if you know your parent and your children, you should architect your code to facilliate that. If you really have to, you can go useContext, and really if you have no other choice, you can go redux. Don't use redux at the very beginning, it's not helpful for entry level programming especially when you are not 100% sure what is a prop in react.

answered Aug 29, 2019 at 16:31

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

2 Comments

Adam Over a year ago

I tried adding a hook but unfortunately it looks like I'll have to try something else as I still can't access the hook while inside creating the function. Think I will see what redux can offer.

windmaomao Over a year ago

Actually in terms of passing props, redux actually offers the similar thing. For example, you still need to implement an event/action to be dispatched via a prop similar to onChange in above example. Redux only allows you to make it global-variable like, but wouldn't change the nature of the problem.

Collectives™ on Stack Overflow

React navigation passing function to a stack navigator and then a header component

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related