Error: Unable to resolve module `react-native-gesture-handler`

Question

I try to use navigate in react-native.. I added : npm install --save react-navigation

but it gives me an error like this :

error: bundling failed: Error: Unable to resolve module react-native-gesture-handler from C:\reactnative\proejectName\node_modules\@react-navigation\native\src\Scrollables.js: Module react-native-gesture-handler does not exist in the Haste module map

this is index :

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

This is app.js

import React from 'react';
import { createStackNavigator, createAppContainer, } from 'react-navigation';
import First from './src/Components/First';
import DescriptionPage from './src/Components/DescriptionPage';


const Navigation = createStackNavigator({
  First: {
    screen: First,
  },
  DescriptionPage: {
    screen: DescriptionPage,
  },
});

const App = createAppContainer(Navigation);

export default App;

this is package.json :

{
  "name": "ProjectName",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-sqlite-storage": "^3.3.10",
    "react-navigation": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "7.4.0",
    "@babel/runtime": "7.4.2",
    "babel-jest": "24.5.0",
    "eslint-config-rallycoding": "^3.2.0",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

You need to install react-native-gesture-handler as well separately in the project dependency list and link it too with native as well. Please refer to this doc.

Hope this helps. Happy Coding!

Answer 2

use the following command to install

yarn add react-native-gesture-handler

and then link the library in the specific project

react-native link react-native-gesture-handler

Answer 3

Gesture Handler not found in your react native project. run this command

npm install react-native-gesture-handler

Happy Coding

Answer 4

In my case react-native-gesture-handler was installed but I uninstalled it and re-installed again.

1: uninstall

npm uninstall react-native-gesture-handler --save

2: install

npm install react-native-gesture-handler --save

3: link

react-native link react-native-gesture-handler

4: Restart npm

npm restart 

or

npm start

Answer 5

For newcomers here:

1. If you are using expo, you can simply run the following command to install the appropriate version for your react native version

react-native-gesture-handler

2. Note that createStackNavigator has been moved to react-navigation-stack, so the right import becomes :

import { createStackNavigator } from 'react-navigation-stack';
import {createAppContainer } from 'react-navigation';

Answer 6

In case you are using expo, you have to install it through expo command:

expo install react-native-gesture-handler

Answer 7

Had the same issue. Solved it by:

npm uninstall react-native-gesture-handler --save

npm install react-native-gesture-handler --save

Answer 8

If you are upgrading to SDK 39.

Run This Command :

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Thanks.

Answer 9

If you have started your application before installing dependencies, you might need to reinstall the application again on your phone or emulator. That was the case for me.

After installing dependencies as shown in the docs, I needed to:

1. remove the application from emulator
2. run yarn android (or npm run android) again through terminal

and it solved my issue.

NOTE: I am NOT using Expo

Answer 10

Make sure your react-navigation version 3.11.0.

And then npm install react-native-gesture-handler command

Answer 11

if you are running mac please do the following:

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. cd ios
6. pod install

and run again

Answer 12

I had the same issue, in my case, installation of the react-native-gesture-handler itself was failing. I was using react-native version 0.61.5. Due to some reasons latest version of the react-native-gesture-handler was not getting installed with my project. I solved the error by installing specific version of the react-native-gesture-handler.

   npm install --save [email protected]

Hope this helps.

Answer 13

use the following commands to install

yarn add react-native-gesture-handler

For React Native versions < v 59.x, link the library in the specific project

react-native link react-native-gesture-handler

Answer 14

It's working

"react-native-gesture-handler": "^1.8.0",

use this instead of

"react-native-gesture-handler": "1.8.0",

remove ^

Answer 15

I sometimes have this issue where even after installing the npm package it will still throw errors. You could try adding the following line to the top level component/file of your app e.g. index.js

import "react-native-gesture-handler"

Answer 16

I solved this issue by:

1. runnning npx react-native link react-native-gesture-handler

2. uninstalling the debug application from the device

3. running npx react-native run-android

Answer 17

yarn add react-native-gesture-handler

or with npm if you prefer:

npm install --save react-native-gesture-handler

reference from https://docs.swmansion.com/react-native-gesture-handler/docs/