How to access this.props from within an object?

Question

I'm using the react-navigation library's StackNavigator. I want to have a header that includes both an icon and animated text. However, part of the text needs to be determined from this.props and I'm running into an issue:

static navigationOptions = {
    headerLeft: null,
    headerRight: (
            <View style={{flexDirection: 'row'}}>
                <Animation.Text animation='fadeInRight'
                                delay={2000}
                                duration={1500}
                                style={{
                                    fontFamily: 'Helvetica-Light',
                                    paddingRight: 5,
                                    paddingTop: 10
                                }}>Welcome {JSON.stringify(this.props.navigation.state.params.username)}</Animation.Text>
                <Icon
                    name='ios-contact-outline'
                    type='ionicon'
                    size={30}
                    color={'#77767c'}
                    style={{paddingRight: 5}}
                />
            </View>
    )
}

this.props is undefined here, but I have no idea how to bind an object to this or if that's even possible. I also tried moving the call out to a function:

static navigationOptions = {
    headerLeft: null,
    headerRight: (
            <View style={{flexDirection: 'row'}}>
                <Animation.Text animation='fadeInRight'
                                delay={2000}
                                duration={1500}
                                style={{
                                    fontFamily: 'Helvetica-Light',
                                    paddingRight: 5,
                                    paddingTop: 10
                                }}>Welcome {this.getUsername}</Animation.Text>
                <Icon
                    name='ios-contact-outline'
                    type='ionicon'
                    size={30}
                    color={'#77767c'}
                    style={{paddingRight: 5}}
                />
            </View>
    )
}

getUsername() {
    return(JSON.stringify(this.props.navigation.state.params.username))
}

and binding getUsername to this in my constructor, but for some reason the function never gets called.

Prasun · Accepted Answer · 2018-04-10T15:28:13.097

1

You need to pass a function for navigationOptions. Please have a look at the example here, Consider the following snippet

static navigationOptions = props => {
  const { navigation } = props;
  const { state, setParams } = navigation;
  const { params } = state;
  // param has the required value
  return {
    headerLeft: null,
    headerRight: (
        <View style={{flexDirection: 'row'}}>
          ...
        </View>
     )
  }
}

Hope this will help!

edited Apr 10 '18 at 15:28

answered Apr 10 '18 at 14:50

Prasun

4,943
2
21
23

this gets me the warning: "Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it." – lmotl3 Apr 10 '18 at 14:56
I used to do this for `header` part in `navigationOptions` like, `navigationOptions: navigationOptions => ({ header: props => })`, let me take a look. – Prasun Apr 10 '18 at 14:59
Hi @lmotl3, I have updated answer, found an example in `react-navigation` example. Sorry for the previous one. Please try this. – Prasun Apr 10 '18 at 15:29
glad that it helped! :) – Prasun Apr 10 '18 at 16:12

score 0 · Answer 2 · answered Apr 10 '18 at 15:43

You can't access a component's props in a static method because they don't have the context of the component, as it has yet to be initialized.

I can't run your code right now but there's an issue here on react-navigation's repo that might help.

Basically, they suggest adding this snippet to your componentDidMount...

this.navigation.setParams({
    username: this.props.username
})

...and then passing a function in your headerRight section like this

static navigationOptions = {
    ...
    headerRight: ({ state }) => {
        return {
            // access username as "state.params.username"
        }
    }
}

Unfortunately I can't run your code right now but maybe this will help.

How to access this.props from within an object?

2 Answers2