Навигация в ReactNative

Я хочу перемещаться между двумя экранами. Я пробую много кода, но пока не успешно. Здесь я пытаюсь получить undefined, это не объект (RNGestureHandlerModule.State). Пожалуйста, помогите, я новичок в React Native, пожалуйста, проверьте, будет ли любая помощь оценена. Если у них есть какие-либо уроки для правильного руководства, пожалуйста, помогите, дайте мне знать

Мои App.Js выглядят как

 import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    import AppNavigator from './AppNavigator';


    type Props = {};
    export default class App extends Component<Props> {
      render() {
        return (

         <AppNavigator/>


        );
      }
    }

My appnavigation look like

    import { createStackNavigator } from 'react-navigation';
    import Home from './Home';
    import Friends from './Friends';


        const AppNavigator = createStackNavigator({
            Home: { screen: Home },
           Friends: { screen: Friends},
        });

        export default AppNavigator;

Мой Friend.js выглядит как

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



type Props = {};
export default class Friends extends Component<Props> {
  render() {
    return (
      <View style = {styles.container}>
        <Text style = {styles.welcome}>Welcome to React Native!</Text>
          <Button
           title = "Back to home"
          onPress = {() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
My HOme.js

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



type Props = {};
export default class Home extends Component<Props> {
  render() {
    return (
      <View style = {styles.container}>
        <Text style = {styles.welcome}>Welcome to React Native!</Text>
          <Button
          title = "Back to home"
          onPress = {() =>
            this.props.navigation.navigate('Home')
          }
        />

      </View>
    );
  }
}