Error: undefined Unable to resolve module `@react-navigation/bottom-tabs`

Question

Been searching for a solution about the error module on navigation. I've tried reset-cache, deleting nodu_modules, reinstall the module but still its not working.

Full details of the error

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

Package.json

"@react-native-community/masked-view": "^0.1.9",
    "native-base": "^2.13.12",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation-stack": "^2.3.11"

App.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Maybe you should mention the platform you are using. There seems to be some MacOS specifics. — Francozen, Apr 15 '20 at 18:17

score 3 · Answer 1 · answered Apr 15 '20 at 18:34

3

in your package.json add "@react-navigation/native": "^5.1.5", and then run npm install @react-navigation/native

answered Apr 15 '20 at 18:34

Neelam Soni

1,251
8
15

After installing @react-navigation/native my issue was resolved. Thank you @neelam soni – Tanvi Agarwal May 08 '22 at 10:34

score 1 · Answer 2 · answered Oct 22 '21 at 07:57

Package that you use react-navigation is modular. So in order to make it work you have to install specific components.

In your case you have to run:

yarn add @react-navigation/native
yarn add @react-navigation/bottom-tabs

The reason for this kind of behavior is that in many apps you need only one type of navigation. This would mean you are installing unused code and clutter your bundle.

In order to clear the bundler cache you can do something like this:

npm < 6.0 and RN < 0.50:

 watchman watch-del-all && rm -rf $TMPDIR/react-* &&
 rm -rf node_modules/ && npm cache clean && npm install && 
 npm start -- --reset-cache

npm >= 6.0 and RN >= 0.50:

 watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* &&
 rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean --force &&
 npm install && npm start -- --reset-cache

This should do the thing.

score 0 · Answer 3 · answered Nov 22 '20 at 06:24

0

I think you have to install package. npm install @react-navigation/bottom-tabs

answered Nov 22 '20 at 06:24

Jahangir

1
1

score 0 · Answer 4 · answered Mar 19 '22 at 18:19

0

Try this “npm i @react-navigation/bottom-tabs”

answered Mar 19 '22 at 18:19

Captain Danny

1

score 0 · Answer 5 · edited Mar 22 '23 at 18:41

0

Run:

npm install @react-navigation/bottom-tabs --force

This worked for me

edited Mar 22 '23 at 18:41

Tyler2P

2,324
26
22
31

answered Mar 15 '23 at 18:46

Gatha Vishesh

1

score 0 · Answer 6 · answered Apr 25 '23 at 22:00

Firstly

rm -rf node_modules/ && npm cache clean

Ensure that you have @react-navigation/native and its dependencies then install @react-navigation/bottom-tabs:

Dependencies:

yarn add @react-navigation/native

In your expo managed project directory, run:

npx expo install react-native-screens react-native-safe-area-context

(Or) In your bare react project directory, run:

npm install react-native-screens react-native-safe-area-context

Then

yarn add @react-navigation/bottom-tabs

Error: undefined Unable to resolve module `@react-navigation/bottom-tabs`

6 Answers6

Linked