How to fix Unable to resolve “react-native-screens” from “node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js”?

Question

I used below command for react app routes.

npm i react-native-router-flux --save

Then i restart npm by "npm start" and get this error

Unable to resolve "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js" Failed building JavaScript bundle.

How can fix this error? I also updated npm.

This is package.json file

         {
          "main": "node_modules/expo/AppEntry.js",
          "scripts": {
          "start": "expo start",
          "android": "expo start --android",
          "ios": "expo start --ios",
          "web": "expo start --web",
          "eject": "expo eject"
         },
         "dependencies": {
           "expo": "~36.0.0",
           "react": "~16.9.0",
           "react-dom": "~16.9.0",
           "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
           "react-native-router-flux": "^4.2.0",
           "react-native-web": "~0.11.7"
          },
          "devDependencies": {
            "babel-preset-expo": "~8.0.0",
            "@babel/core": "^7.0.0"
           },
          "private": true
          }

Answer 1

I used react native official navigation. It really helpful and easy to use. Visit https://facebook.github.io/react-native/docs/navigation

Answer 2

I had the same issue. Noticed that package.json in the repo is missing react-native-screens from the dependencies.

npm i react-native-screens

Answer 3

This is because of the new react-navigation changes. Doing a npm install right now is installing the latest versions instead of the previous versions

You should clear the cache by removing node_module, .expo and package-lock.json and then reinstall all the packages and start the project by using the following command: expo r -c which should reset the cache and make the project work again as intended.

More Info

Answer 4

Installing following two,

npm install --save @react-native-community/masked-view
npm install react-native-safe-area-context

it is work for me

or use,

npm install @react-navigation/native

for install 'react-navigation'

Answer 5

I got a similar error after upgrading from React Navigation V3 to V4.

Simply doing

npm i react-native-screens

solved the problem for me.

Answer 6

Install the following dependencies.

@react-native-community/masked-view
react-native-safe-area-context

Answer 7

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