Can't invoke navigate inside another method

Question

I am trying to navigate to another screen using react-navigation. However with this code I get the error: undefined is not an object (evaluation 'this.props.navigation')

When invoking navigatedirectly (see example at the bottom) it works.

What am I doing wrong?

This does not work:

  _renderRow (rowData) {
    return (
      <View >
        <TouchableHighlight onPress={this._handlePress} underlayColor='white'>
            <Image
              style={{width: 50, height: 50}}
              source={{uri: 'http://openweathermap.org/img/w/' + rowData.iconName + '.png'}}
            />
        </TouchableHighlight>
      </View>
    )
  }

  _handlePress () {
    this.props.navigation.navigate('Details')
  }

This does work:

  _renderRow (rowData) {
    return (
      <View >
        <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')} underlayColor='white'>
            <Image
              style={{width: 50, height: 50}}
              source={{uri: 'http://openweathermap.org/img/w/' + rowData.iconName + '.png'}}
            />
        </TouchableHighlight>
      </View>
    )
  }

onPress={this._handlePress.bind(this)}

Gerardo
– Gerardo

2017-09-27 23:25:40 +00:00
Commented Sep 27, 2017 at 23:25 — Gerardo
– Gerardo, Commented Sep 27, 2017 at 23:25

Gerardo · Accepted Answer · 2017-09-27 23:34:36Z

1

You need to bind the context. onPress={this._handlePress.bind(this)} will do the work.

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

Here's the documentation:

Handling events

edited Sep 27, 2017 at 23:34

answered Sep 27, 2017 at 23:27

Gerardo

9791 gold badge7 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Can't invoke navigate inside another method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related