React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push')

Question

I\'m trying to use NavigatorIOS so in my index.ios.js I got:

\'use strict\';

var React = require(\'react-native\');
var Home = req         


        

Answer 1

Since you're using ES6 you need to bind 'this'.

For example: onPress={this.onPress.bind(this)}

Edit: Yet another way that I've been using more recently is to use an arrow function on the function itself, since they will automatically bind the outside this.

onPress = () => {
  this.props.navigator.push({
    title: 'Routed!',
    component: Park
  });
};

Answer 2

You can bind the function to this in the constructor.

constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
}

Then use it when rendering without binding.

render() {
    return (
        <TouchableHighlight onPress={this.onPress} style={styles.button}>
            <Text>Welcome to the NavigatorIOS. Press here!</Text>
        </TouchableHighlight>
    );
}

This has the advantage of being able to be used multiple times and also clean's up your render method.