'Error: Unable to resolve module `react-native-gesture-handler`
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"
}
}
Solution 1:[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.
Solution 2:[2]
Use the following command to install
yarn add react-native-gesture-handler
Then link the library in the specific project
react-native link react-native-gesture-handler
Solution 3:[3]
Gesture Handler not found in your react native project. run this command
npm install react-native-gesture-handler
Solution 4:[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
Solution 5:[5]
Had the same issue. Solved it by:
npm uninstall react-native-gesture-handler --save
npm install react-native-gesture-handler --save
Solution 6:[6]
In case you are using expo, you have to install it through expo command:
expo install react-native-gesture-handler
Solution 7:[7]
For newcomers here:
- 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
- Note that
createStackNavigator
has been moved toreact-navigation-stack
, so the right import becomes :
import { createStackNavigator } from 'react-navigation-stack';
import {createAppContainer } from 'react-navigation';
Solution 8:[8]
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:
- Remove the application from emulator
- Run
yarn android
(ornpm run android
) again through terminal
NOTE: I am NOT using Expo
Solution 9:[9]
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
Solution 10:[10]
Make sure your react-navigation version 3.11.0.
And then npm install react-native-gesture-handler
command
Solution 11:[11]
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
Solution 12:[12]
It's working
"react-native-gesture-handler": "^1.8.0",
use this instead of
"react-native-gesture-handler": "1.8.0",
remove ^
Solution 13:[13]
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"
Solution 14:[14]
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/
Solution 15:[15]
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]
Solution 16:[16]
I solved this issue by:
Running
npx react-native link react-native-gesture-handler
Uninstalling the debug application from the device
Running
npx react-native run-android
Solution 17:[17]
If you are running mac please do the following:
- Remove
node_modules
andpackage-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
cd ios
pod install
Then run again
Solution 18:[18]
For me, and this is a weird one. I had the react-native start
terminal window already open and running the metro bundler for another/different RN app already running. After I killed it, and re-ran yarn ios
, and it reopened its own metro bundler window -my error was gone
Solution 19:[19]
If you're using react-navigation v6, you don't need react-native-gesture-handler
you can just remove it, with
npm uninstall react-native-gesture-handler
mind you, its with only version 6 that you're free to remove it
Solution 20:[20]
If you already have install...
npm install react-native-gesture-handler
Make a import 'react-native-gesture-handler'
On the first line of your App.js code (Attention must be on the first line, on top of all your code and any import)
Just uninstall your application running on your emulator or any physical device and run again (install again) and it will work..
Solution 21:[21]
You are getting this error after installation of react-native-gesture-handler because your react-native version is less than react-native: "60" so after installation you have to link that module "react-native link react-native-gesture-handler". And build again it will resolve your error
Solution 22:[22]
This error occurs for two main reasons.
If you didn't install
react-native-gesture-handler
, then npm oryarn install react-native-gesture-handler
.If you already did, then you need to rebuild your app, for android
react-native run-android
and for ios you should install pods then run again.cd ios && pod install --repo-update && cd .. react-native run-ios
you may need to restart metro again, react-native start
.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow