Why is this.props.navigator.push throwing an error?

Question

I am building a React-native app for iOS (I am fairly new to this framework).

I have a button and once you click it, it should take you to the login view, Once the user clicks the button, it should navigate the user to the LoginPage Component. But currently when I do that I get the error you see in image.

 'use strict'

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image, 
  Button,
  ActivityIndicator,
  TouchableOpacity,
} from 'react-native';


import LoginPage from './login';

type Props = {};
export default class App extends Component<Props> {



  myPress = () =>{
    //This is where the error occurs
    this.props.navigator.push({
      title: 'log in to YourHope.io',
      component: login,
      passProps: null,
  });
  }

  render() {
    let pic = {
      uri: 'https://example.com'
    };
    let logo = {
      uri: 'https://example.com'
    }
    const companyName = 'Example LLC';
    const message = 'cool welcome';

    return (
      <View style={{ flex: 1, backgroundColor: '#eee', }} >
       ...

        <TouchableOpacity
          style={styles.loginScreenButton}
          onPress={this.myPress}
          underlayColor='#fff'>
          <Text style={styles.loginText}>login</Text>
        </TouchableOpacity>

        </View>
      </View>
    );
  }
}

And here is the login view:

'use strict';

import React, { Component } from 'react'
import {
  StyleSheet,
  Image,
  View,
  TouchableHighlight,
  FlatList,
  Text,
} from 'react-native';


export default class LoginPage extends Component<{}> {
    render() {
      return (
        <Text></Text>
      );
    }
  }