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

React Native

React Native Problem Overview


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"
  }
}

React Native Solutions


Solution 1 - React Native

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 - React Native

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 - React Native

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

npm install react-native-gesture-handler

Solution 4 - React Native

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 - React Native

Had the same issue. Solved it by:

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

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

Solution 6 - React Native

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

expo install react-native-gesture-handler

Solution 7 - React Native

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
  1. 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';

Solution 8 - React Native

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

NOTE: I am NOT using Expo

Solution 9 - React Native

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 - React Native

Make sure your react-navigation version 3.11.0.

enter image description here

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

Solution 11 - React Native

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

Then run again

Solution 12 - React Native

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 react-native-gesture-handler@1.3.0

Solution 13 - React Native

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 14 - React Native

It's working

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

use this instead of

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

remove ^

Solution 15 - React Native

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 16 - React Native

I solved this issue by:

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

  2. Uninstalling the debug application from the device

  3. Running npx react-native run-android

Solution 17 - React Native

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 18 - React Native

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 - React Native

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 - React Native

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 - React Native

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 - React Native

This error occurs for two main reasons.

  • If you didn't install react-native-gesture-handler, then npm or yarn 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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionhhhView Question on Stackoverflow
Solution 1 - React NativeSuraj MalviyaView Answer on Stackoverflow
Solution 2 - React NativeIrshad BabarView Answer on Stackoverflow
Solution 3 - React NativeAkash KumarView Answer on Stackoverflow
Solution 4 - React NativeWaqar UlHaqView Answer on Stackoverflow
Solution 5 - React NativeRomyView Answer on Stackoverflow
Solution 6 - React NativeJonathanView Answer on Stackoverflow
Solution 7 - React NativeDeeSilenceView Answer on Stackoverflow
Solution 8 - React NativesafakeskinView Answer on Stackoverflow
Solution 9 - React NativeSushilView Answer on Stackoverflow
Solution 10 - React Nativelakshan chathuraView Answer on Stackoverflow
Solution 11 - React NativeHesham A. OthmanView Answer on Stackoverflow
Solution 12 - React NativeVasanthView Answer on Stackoverflow
Solution 13 - React NativedevELIOperView Answer on Stackoverflow
Solution 14 - React NativeKeshav GeraView Answer on Stackoverflow
Solution 15 - React NativeAhmad KhudeishView Answer on Stackoverflow
Solution 16 - React NativeSardorek AminjonovView Answer on Stackoverflow
Solution 17 - React NativeAmranur RahmanView Answer on Stackoverflow
Solution 18 - React NativeSeanMCView Answer on Stackoverflow
Solution 19 - React NativendotieView Answer on Stackoverflow
Solution 20 - React NativeRomário GabaritadoView Answer on Stackoverflow
Solution 21 - React Nativevishal SharmaView Answer on Stackoverflow
Solution 22 - React NativegxmadView Answer on Stackoverflow