Reputation: 2563

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

Upvotes: 118

Answers (27)

Iskren Lalov

Reputation: 39

I had the same issue when using registerComponent to register a custom Android Custom Activity. I solved it by wrapping it in gestureHandlerRootHOC.

import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

AppRegistry.registerComponent('prompt', () => gestureHandlerRootHOC(Prompt));

Upvotes: 0

Muhammet

Reputation: 436

Maybe you made the same mistake as me:

I added the wrong library.

I should use

import {FlatList, View} from 'react-native';

instead of

import {FlatList} from 'react-native-gesture-handler';

Upvotes: 0

poornima lakmal

Reputation: 1

I manual enter the "react-native-gesture-handler":"2.9.0" in package.json and run yarn add. finally Its working for me.

Upvotes: 0

gxmad

Reputation: 2210

This error occurs for two main reasons.

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

Upvotes: 8

Andres Diaz Lopez

Reputation: 602

Note: If you don't use Eas build in your app. This comment is not for you.

I will share my case and How I solved it.

Stack I am using.

Expo
react-native-firebase, native library.
Eas build, to process the native library inside Expo.

Problem

I followed all the steps that library said.

npm install:

@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/native
@react-navigation/native-stack
react-native-reanimated
react-native-safe-area-context
react-native-screens
react-native-gesture-handler

import "react-native-gesture-handler"; // First line of my project

However, it didn't work.

Solution

Brother, it was really simple. But it took me a lot of time to discover. I just had to rebuild the EAS BUILD with the command.

eas build --profile development --platform android

download the build on my phone and it worked.

Upvotes: 0

Judefabi

Reputation: 71

The issue might be as simple as forgetting to wrap your code in app.js after installing the gesture handler package as seen from your code given in the package documentation. Don't forget the flex value else you'll get a blank screen. I had the same issue

<GestureHandlerRootView style={{flex: 1}}>
  //your code goes in here
</GestureHandlerRootView>

Upvotes: 1

vishal Sharma

Reputation: 31

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

Upvotes: 0

Romário Gabaritado

Reputation: 113

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..

Upvotes: 6

ndotie

Reputation: 2150

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

Upvotes: 0

SeanMC

Reputation: 2346

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

Upvotes: 0

safakeskin

Reputation: 718

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 (or npm run android) again through terminal

NOTE: I am NOT using Expo

Upvotes: 2

Hesham A. Othman

Reputation: 43

If you are running mac please do the following:

Remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
cd ios
pod install

Then run again

Upvotes: 0

Sardorek Aminjonov

Reputation: 834

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

Upvotes: 0

Vasanth

Reputation: 607

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]

Upvotes: 0

Amranur Rahman

Reputation: 1123

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/

Upvotes: 0

Sushil

Reputation: 2490

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

Upvotes: 1

Akash Kumar

Reputation: 669

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

npm install react-native-gesture-handler

Upvotes: 27

Irshad Babar

Reputation: 1419

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

Upvotes: 35

Suraj Malviya

Reputation: 3773

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.

Upvotes: 165

Ahmad Khudeish

Reputation: 1137

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"

Upvotes: 0

Keshav Gera

Reputation: 11244

It's working

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

use this instead of

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

remove ^

Upvotes: 0

devELIOper

Reputation: 665

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

Upvotes: 0

Jonathan

Reputation: 883

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

expo install react-native-gesture-handler

Upvotes: 5

Waqar UlHaq

Reputation: 6422

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

npm start

Upvotes: 6

Romy

Reputation: 548

Had the same issue. Solved it by:

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

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

Upvotes: 7

DeeSilence

Reputation: 281

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 to react-navigation-stack, so the right import becomes :

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

Upvotes: 3

lakshan chathura

Reputation: 1

Make sure your react-navigation version 3.11.0.

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

Upvotes: 0

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

Answers (27)

Related Questions