Navigation in ReactNative

Question

I want to navigation between two screen . I am try lot of code but not successul yet Here i am try this get undefined is not an object(RNGestureHandlerModule.State). Please help i am new in react native please check any help would be appreciated. If their any tuturial to proper guide please help let me know

My App.Js Look Like

 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;

My Friend.js look Like

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>
    );
  }
}

Answer 1

It is not linked to Navigation library. The issue is linked to 'RNGestureHandlerModule'. I assume you are using another library, probably 'react-native-gesture-handler'. Try removing and linking it using react-native link.

Found this related post here

Answer 2

You are using the latest reactnavigation library. It requires to install react-native-gesture-handler . But if you are using Expo , you don't need to install this library since its already included in the sdk.

After by installing the react-native-gesture-handler library, run the react-native link command to link all the native dependencies.