Navigation iOS in React Native

Question

I've looked at many different Stack Overflow posts about how to navigate screens in React Native but none of them seem to be working, perhaps because those posts were for older versions of React Native. Here is my code with the irrelevant parts taken out below. I'm trying to navigate from this screen to another screen called SubTasks. I made sure to say export default class SubTasks extends React.Component in SubTasks.js, by the way. The error I'm getting when I click on the button is "undefined is not an object (evaluating this.props.navigator.push'). Does anyone know where my error may be?

    import React, { Component, PropTypes } from 'react';
    import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button} 
             from 'react-native';
    import SubTasks from './SubTasks';

    export default class App extends React.Component {
      constructor(props) {
        super(props);
      }                                                        
      renderScene(route, navigator) {
         if(route.name == 'SubTasks') {
           return <SubTasks navigator = {navigator} />
         }
      }

      _navigate() {
        this.props.navigator.push({
          title: 'SubTasks',
        })
      }

      render() {
        return (
          <View>
            <NavigatorIOS
              initialRoute= {{ 
                title: 'SubTasks',
                component: SubTasks,
              }} 
              style = {{ flex: 1 }}                                          
            />                                 
            <Button 
              title= 'SubTasks'
              style = {{flexDirection: 'row', fontSize: 20, alignItems: 'flex-end'}}
              color = 'blue'
              onPress= {() => this._navigate()}>
              styleDisabled = {{color: 'red'}}
            </Button>
          </View>                                                              
      )}                                                                       
   }

Answer 1

Make sure you bind your _navigate function in your constructor:

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

Or consider using arrow function

_navigate = () => {
  this.props.navigator.push({
    title: 'SubTasks',
  })
}