Unable to resolve module 'react-native-screen'

Question

I got this error from React Native on Atom:

Unable to resolve module 'react-native-screen'

Here are my steps:

1. I ran npm install --save react-navigation, and I got the following:

2. Then I ran npm install:

And after, when I run my application, I get an error:

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

Answer 1

You need to install 3 more libs react-native-gesture-handler, react-native-reanimated, and react-native-screens.

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

Refs: https://reactnavigation.org/docs/en/getting-started.html#installing-dependencies-into-a-bare-react-native-project

Answer 2

Use below steps, this will work 100%.

1. Install React Navigation

npm install react-navigation

2. Install Dependencies

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

3. Install React Navigation Stack

npm install react-navigation-stack @react-native-community/masked-view

4. Start the app and clear cache with npm start -c

Update Imports

imports  will  look like this:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

Errors? If you are still seeing errors and complaints about packages, do the following:

1. rm -r node_modules

2. rm package-lock.json

3. expo upgrade

4. npm start -c

Answer 3

If you have downloaded react-navigation then it wont work without its supporting Libs which are react-native-gesture-handler ,react-native-reanimated, react-native-screens

you can download it via yarn or npm .

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

or

yarn add react-native-gesture-handler react-native-reanimated react-native-screens

Hope it helps. feel free for doubts

Answer 4

I used the following steps :

npm install --save react-navigation

expo install react-native-gesture-handler react-native-reanimated react-navigation-stack react-native-screens

expo install react-native-safe-area-view react-native-safe-area-context

expo install @react-native-community/masked-view

Answer 5

If you are using expo for a react-native project then for react-native navigation you need to install below dependencies first.

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

then after installing above dependencies you can install dependencies for different type of navigation like -

1. Bottom tab navigation npm install @react-navigation/bottom-tabs
2. Drawer navigation npm install @react-navigation/drawer

etc.

Answer 6

In your .eslintrc.js add these lines:

 settings: {
    'import/resolver': {
      'node': {
        extensions: ['.js', '.jsx', '.json', '.native.js']
      }
    },
  },

In your .flowconfig add this:

module.file_ext=.native.js

Answer 7

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

Thanks.