React native не может прочитать свойство `` перейти '' - неопределенная ошибка

У меня есть модальное окно, которое появляется, когда пользователь нажимает кнопку «получить GEO». В модальном окне есть кнопка, которая должна перейти к UserScreen, но я получаю сообщение об ошибке: не удается прочитать, свойство «перейти» не определено. Если я помещаю кнопку в class WelcomeScreen extends Component, она работает нормально.

Заранее спасибо.

Вот код ниже:

Экран приветствия:

import React, { Component } from "react";
import { TouchableOpacity, TouchableHighlight, Modal, StyleSheet, Text, View, Button, AppRegistry, Image, TextInput } from 'react-native';

import { observable } from "mobx";
import { observer, inject } from "mobx-react";

@inject("store")
class WelcomeScreen extends Component {
  constructor(props: Object) {
    super(props);
  }


  render() {
    console.info("Render home");
    return (
      <View>

        <TouchableOpacity style = {
          [{
            paddingTop: 10,
            paddingBottom: 10,
            borderRadius: 5,
            marginBottom: 20,
            width: '70%',
            backgroundColor: '#009688'
          }]
        } activeOpacity = {.5}
          onPress = {this.props.store.fetchNearestLocation}
        >
          <Text>Get GEO</Text>
        </TouchableOpacity>
        <ShowModal />
      </View>
    );
  }
}
export default WelcomeScreen

@inject("store")
@observer
class ShowModal extends Component {
  render() {
    console.info("Render Modal");
    return (
      <Modal
        animationType = "slide"
        visible = {this.props.store.isModalVisible}
        onRequestClose = {() => {
          alert('Modal has been closed.');
        }}>
          <View>
            <Text>Hello World!</Text>
            <TouchableOpacity style = {
              [{
                paddingTop: 10,
                paddingBottom: 10,
                borderRadius: 5,
                marginBottom: 20,
                width: '70%',
                backgroundColor: '#009688'
              }]
            } activeOpacity = {.5}
              onPress = {() => this.props.navigation.navigate('UserScreen')}
            >
            </TouchableOpacity>
            <TouchableOpacity style = {
              [{
                paddingTop: 10,
                paddingBottom: 10,
                borderRadius: 5,
                marginBottom: 20,
                width: '70%',
                backgroundColor: '#009688'
              }]
            } activeOpacity = {.5}
              onPress = {this.props.store.closeModal}
            >
              <Text>Close Modal</Text>
            </TouchableOpacity>
          </View>
      </Modal>
    );
  }
}

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

import { Provider } from "mobx-react";
//import Home from "./Home";
import stores from "./stores";

import WelcomeScreen from './screens/WelcomeScreen';
import UserScreen from './screens/UserScreen';

const AppNavigator = StackNavigator({
  WelcomeScreen: { screen : WelcomeScreen },
  UserScreen: { screen : UserScreen }
})

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
  },
});

class App extends React.Component {

  render() {
      return (
        <Provider { ...stores }>
        <AppNavigator />
        </Provider>
      );
  }
}
export default App;