Unable to resolve "@react-navigation/native" from "App.js" - React Native + How to Solve?

Question

undefined Unable to resolve module @react-navigation/native from App.js: @react-navigation/native could not be found within the project.

If you are sure the module exists, try these steps:

 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
- node_modules\react-native\Libraries\Utilities\HMRClient.js:307:41 in showCompileError
- node_modules\react-native\Libraries\Utilities\HMRClient.js:228:26 in client.on$argument_1
- node_modules\eventemitter3\index.js:181:39 in emit
- node_modules\metro\src\lib\bundle-modules\WebSocketHMRClient.js:80:20 in _ws.onmessage
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\WebSocket\WebSocket.js:232:27 in _eventEmitter.addListener$argument_1
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
> Unable to resolve "@react-navigation/native" from "App.js"
Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
Error: Can't find react-native in package.json dependencies
Error: Can't find react-native in package.json dependencies

Please Help Me. Email ID: [email protected]

Followed all the steps given in this getting started guide? reactnavigation.org/docs/getting-started — Hisham Mubarak
– Hisham Mubarak, Commented Apr 1, 2020 at 16:58
if you are already running the app and at the same time installed the dependencies, then you have to relaunch it. — Thulfiqar
– Thulfiqar, Commented Dec 21, 2022 at 10:47

devELIOper · Accepted Answer · 2020-05-09 10:00:47Z

32

npm install @react-navigation/native

if using expo:

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

Also run:

npm install react-navigation

answered May 9, 2020 at 10:00

devELIOper

6656 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Operator Over a year ago

Why do we need all these dependencies?

Eklavya Chandra Over a year ago

Also restart the server after running these commands ;)

Henfs · Accepted Answer · 2020-04-02 00:21:25Z

14

This error occurs because you haven't installed react-navigation.

Run:

npm install react-navigation
npm start -- --reset-cache

edited Apr 2, 2020 at 0:21

Henfs

5,45912 gold badges33 silver badges48 bronze badges

answered Apr 1, 2020 at 17:58

user13142973

6451 gold badge6 silver badges11 bronze badges

Comments

Virinchi Manepalli · Accepted Answer · 2021-12-28 09:32:52Z

7

the best solution is to delete your node_modules and package-lock.json and try npm install, it worked for me

edited Dec 28, 2021 at 9:32

answered Jan 9, 2021 at 7:02

Virinchi Manepalli

3023 silver badges6 bronze badges

1 Comment

Obonyo Over a year ago

This seems straight forward but it works

Abubakr Elghazawy · Accepted Answer · 2020-12-14 01:18:11Z

2

well i have solved this by reinstalling / updating these packages.

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

do the trick for

npm start -- --reset-cache

But performing the following did succeed:

Delete

node_modules & package-lock.json Delete app from phone

run npm start -- --reset-cache
run app

answered Dec 14, 2020 at 1:18

Abubakr Elghazawy

99515 silver badges21 bronze badges

Comments

hiriski · Accepted Answer · 2021-03-07 06:20:41Z

2

Try to add this line to your metro.config.js

sourceExts: ['jsx', 'js', 'ts', 'tsx', 'json'],

answered Mar 7, 2021 at 6:20

hiriski

213 bronze badges

Comments

Jaycn · Accepted Answer · 2022-11-30 14:15:14Z

2

This error is due to stale cache. To fix this, Run: npm start -c //This is if you're using expo

if you're not using expo, Run: npx react-native start --reset-cache

answered Nov 30, 2022 at 14:15

Jaycn

272 bronze badges

Comments

AnatuGreen · Accepted Answer · 2021-12-19 14:02:28Z

1

Also, you have to restart your app, do npm run... to start a new server if you are using expo.

answered Dec 19, 2021 at 14:02

AnatuGreen

9911 gold badge13 silver badges20 bronze badges

Comments

Hashir · Accepted Answer · 2022-06-21 06:50:59Z

0

I have been stuck on same issue for a whole day at last deleting packagelock.json and node module folder with using

try resetting the cache

after that npm start

and at last run: npx react-native run-android

and now all the files will be rebuild and your navigation container should be working

answered Jun 21, 2022 at 6:50

Hashir

1

Comments

ifeanyi ugwu · Accepted Answer · 2023-01-27 23:40:36Z

0

I came across this question when I was looking for a solution as I had a similar problem. You can use yarn commands in the documentation instead of npm.

If it persits, change

import { NavigationContainer } from '@react-navigation/native';

to:

import { NavigationContainer } from './node_modules/@react-navigation/native;

I had made that changes before using the yarn commands

While running the build, use:

npx react-native start

edited Jan 27, 2023 at 23:40

answered Jan 26, 2023 at 1:19

ifeanyi ugwu

686 bronze badges

Comments

Plaix · Accepted Answer · 2025-05-17 13:17:39Z

0

I had the same issue recently, my environment was setup on Linux(Ubuntu Dist). This is what fixed it for me, in case anyone has similar issue as mine.

export EXPO_NO_FAST_RESOLVER=1 
npx expo start -c

answered May 17 at 13:17

Plaix

8813 gold badges11 silver badges20 bronze badges

Collectives™ on Stack Overflow

Unable to resolve "@react-navigation/native" from "App.js" - React Native + How to Solve?

10 Answers 10

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related