screenProps.object returns ALWAYS null in navigationOptions

Question

I want to put a part of data (username) from fetched props on navigation header. Please see my navigationOptions.

  static navigationOptions = ({navigation, screenProps}) => ({
    ...
    title: !_.isNil(screenProps.outfitDetail) ? 
    `${screenProps.outfitDetail.user.username}'s Post`: ''
  });

My problem is that title always return a blank string because screenProps.outfitDetail is always null. What am I doing wrong here? Why is it returning null all the time?

I fetched outfitDetail props using Redux on componentWillMount()

componentWillMount() {
    const { id } = this.props.navigation.state.params;
    const { token, hType} = this.props;
    this.props.fetchOutfitDetail(token, hType, id);
  }

I could get the outfitDetail props from render() function.

render () {
    const detail = this.props.outfitDetail;
    if(detail) {
      return (
        <ScrollView style={styles.root}>
        ...

I call my component by its id

this.props.navigation.navigate('OutfitDetail', {id})

Doing same thing on User Profile

console.log(this.props.currentUser.username); <- prints username
this.props.navigation.navigate('Profile', {username:this.props.currentUser.username});

But in Profile screen, it can't get screenProps.username either.

Where are you passing `screenProps`? And where are you setting `outfitDetail`? It's hard to tell without seeing more code. — Scott, Oct 22 '17 at 14:07
@Scott Thanks for asking. I thought I can just put `screenProps` to get props for the current screen. Should I pass it somewhere? For you second question, I set outfitDetail on mapStateToProps. So I could get the object from render() function. — merry-go-round, Oct 22 '17 at 14:12
This is really hard to debug because I can't pass console.log() on navigationOptions :( — merry-go-round, Oct 22 '17 at 14:13
Are `outfitDetail` and `fetchOutfitDetail` injected by a Redux container ? — Freez, Oct 22 '17 at 14:53
@Freez Yes, they are. I think screenProps is not connected to the screen's props. So I think I have to put props on the Component. — merry-go-round, Oct 22 '17 at 14:54
I just edited the question and as you can see I'm not passing any props. I think it can get not props from redux(mapStateToProps) but the props when the component is called. Very interesting. — merry-go-round, Oct 22 '17 at 14:57
Damn it. I don't think it's right way to do it though. I have to store logged in user's username on props :( — merry-go-round, Oct 22 '17 at 14:58

Freez · Accepted Answer · 2017-10-22T15:17:55.740

3

You cannot access to your screen's component properties with screenProps. To use values from Redux store in your navigationOptions you can see solutions in this thread :

https://github.com/react-community/react-navigation/issues/940

Solution 1:

static navigationOptions = {
  headerTitle: <SomeTitle />
};

where SomeTitle is a Redux connected component.

Solution 2:

Pass state as navigation helper to your root navigator

<MainNavigator 
  navigation={addNavigationHelpers({ 
    dispatch, 
    state: state.nav, 
    globalState: state 
  })}
/>

And use it like this

static navigationOptions = ({ navigation }) => ({
  ... 
  title: globalState.path.to.your.data
});

edited Oct 22 '17 at 15:17

answered Oct 22 '17 at 15:09

Freez

7,208
2
19
29

Thanks for your kind answer with many details. But I'm rather passing extra props when I call a component. I think your approach works but I'm choosing simple way to do so. :P – merry-go-round Oct 22 '17 at 15:23
Voted up your answer though. Thanks for your input. Very appreciated it – merry-go-round Oct 22 '17 at 15:24
I think you can solve this problem (+200 bounty) : https://stackoverflow.com/questions/47930049/how-to-reset-tabnavigator-when-user-logs-out-from-other-screen – merry-go-round Jan 03 '18 at 05:25

screenProps.object returns ALWAYS null in navigationOptions

1 Answers1