I got this error from React Native on Atom:
Unable to resolve module 'react-native-screen'
Here are my steps:
npm install --save react-navigation, and I got the following:
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.
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
rm -rf ./node_modules and yarn cache clean as well.Use below steps, this will work 100%.
npm install react-navigation
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install react-navigation-stack @react-native-community/masked-view
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:
rm -r node_modules
rm package-lock.json
expo upgrade
npm start -c
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
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 -
npm install @react-navigation/bottom-tabsnpm install @react-navigation/draweretc.
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
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
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.