undefined is not an object (evaluating 'RNGestureHandlerModule.State'

I have installed react-navigation in my React Native project. Its a starter project doesn't have any codes. But while running project I am facing error like this.

Here is my Navigation code

import { createStackNavigator } from 'react-navigation';

import Home from './screens/Home';
import WeatherDetail from './screens/WeatherDetail';


const Navigation = createStackNavigator({
  Home: { screen: Home },
  WeatherDetail: {
  screen: WeatherDetail
 } 
});

export default Navigation;

And here is the App.js codes

 import Navigator from './Router';


 export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>
         <Navigator />
       </View>
     );
    }
  }

If I remove the navigator component from the App.js and replace it with a Text the application runs without any error.

Solution 1:

1. remove node_modules and package-lock.json
2. npm install
3. npm install --save react-navigation
4. npm install --save react-native-gesture-handler
5. react-native link

Solution 2:

If you are using react-link to link your dependencies:

1. 0pen your ios Podfile and delete all yout linked dependencies: pod 'xxxxxxx', :path => '../node_modules/xxxxx
2. Close Xcode
3. In your /ios folder run "pod update"
4. In your project source run "react-native link"
5. Open Xcode and Clean Build Folder from Xcode Menu -> Product
6. Run your application from Xcode
7. Link manually the dependency "react-native-gesture-handler" into your Xcode Project following steps in documentation: https://facebook.github.io/react-native/docs/linking-libraries-ios
8. Now run your application from Xcode, you should be fine.