Error: Unable to resolve module `@react-native-community/toolbar-android`

Question

Weirdly, the react-native-vector-icons was working well but by using ^ ("^6.6.0") for its version in the package.json file on the new release this error happens.

It's weird because two days ago it works well but now starting of my project ran to this error:

error: Error: Unable to resolve module @react-native-community/toolbar-android from node_modules\react-native-vector-icons\lib\toolbar-android.js: @react-native-community/toolbar-android could not be found within the project.

Gayn

Answer 1

After reading this issue and trying many solutions I reach to two solutions:

• You can delete all node_modules folder and put the version of react-native-vector-icons to "6.6.0" instead of "^6.6.0" and then install all packages again. absolutely, it is better to delete all caches and builds and start everything again. (NOT Recommended)

• You can install the @react-native-community/toolbar-android by using the below command:

  yarn add @react-native-community/toolbar-android
  

  Or

  npm install --save @react-native-community/toolbar-android
  

Note: Both of these solutions are temporary, and soonly this bug will be fixed, and there is no need to install the toolbar-android package.

---

Prev Update

I update the package to version "^7.0.0" on my project and still, the issue remains, so this solution is currently perseverance.

---

New Update

This issue is fixed on version "^7.1.0" and there is no need to install the @react-native-community/toolbar-android.

But if you still need to have @react-native-community/toolbar-android, install the 0.2.1 version.

Gayn

how i can update to "^7.1.0" ? i am still getting this issue. – Longe

@ZeeshanAhmadKhalil, for npm use npm commands for yarn use yarn commands, there is another way, completely remove it and then install it again with the new version, if still getting this issue, you should know, there is another package that use vector-icon in itself and install the lower version, for fixing this issue still you should install @react-native-community/toolbar-android. – Gayn

Answer 2

Update the library

react-native-vector-icons

to the latest version.

Immerge

Answer 3

I had this problem too. In my case, only works when I removed and added the package again with the latest version (7.0.0).

yarn remove react-native-vector-icons
yarn add react-native-vector-icons

Nagoya

Answer 4

I had precisely the same error. All I had to do was install toolbar-android and done.

npm install --save @react-native-community/toolbar-android

Pubes

Welcome to SO! Note that this question had already been answered by somebody else who elaborated more about how to fix this problem. – Bespangle

@MyKoryto The accepted answer crossed out the npm install section. I didn't want to upgrade to the new version of RN Vector Icons. Since installing the toolbar-android solved my case, thought I might post it here in case someone is in my situation. Cheers! – Pubes

Alright! Makes sense, sorry for bothering you mate! – Bespangle

No problemo! Thanks! – Pubes

This is the only solution that worked for me. – Fat

Answer 5

Go the path \node_modules\native-base\node_modules\react-native-vector-icons\lib\toolbar-android.js

Replace import ToolbarAndroid from '@react-native-community/toolbar-android' to import {ToolbarAndroid} from './react-native';

Suspensory

Answer 6

I also got the same error after upgrading from version 6 to 7. The issue can be fixed simply by resetting the cache.

Please try npm start -- --reset-cache

Hakeem

Answer 7

do this: rm -rf node_modules/ rm -rf package.lock.json npm i react-native start --reset-cache

from your project directory

Muntin

Answer 8

Just Import it direct from react native it solves my problem

node_modules\react-native-vector-icons\lib\toolbar-android.js

import { ToolbarAndroid } from 'react-native';

Fronnia

Answer 9

Same issue, I solved it: My environment: RN: 0.61.5 Node: v12.18.3 OS: Windows 10 Pro

You can install react-native-vector-icons latest version (current 7.0.0). And do not run auto-link (react-native link react-native-vector-icons) Finally, running react-native start --reset-cache Good luck.

Spyglass

Answer 10

First let's understand the standard convention used in package.json for packege's version. So if you see ~1.0.2 it means to install version 1.0.2 or the latest patch version such as 1.0.4. If you see ^1.0.2 it means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.

Now, coming to the issue.

The issue is caused because you are having a version of react-native-vector-icons which is giving you some trouble. Check it's version by this command under your project directory:

npm list react-native-vector-icons --version \ is it 6.6.0 ??

No ?? . There is the problem. You need strictly 6.6.0 but you got something else.

Solution:

Delete node_modules directory under your project. Change the version of react-native-vector-icons in package.json to 6.6.0 (basically remove ^ to tell npm to get me exactly what I want. Nothing more, nothing less !)

Then do npm install !

Powe

Answer 11

The other alternative is to use expo's vector Icons. Something like this. import { Ionicons } from "@expo/vector-icons". Then render your Icon like this;

<Ionicons
  name="ios-exit-outline"
  color={colors.danger}
  size={28}
  style={{ marginRight: -15 }}
/> 

Deceit

Answer 12

Edit this file node_modules\react-native-vector-icons\lib\toolbar-android.js

remove 'import ToolbarAndroid from '@react-native-community/toolbar-android';' edit return null

Polybius

terrible idea. since node_modules doesn't get into git, you will always go back to making the above change should you reinstall modules again, I believe. – Corelative

Answer 13

for this case you have not toolbar-android in your modules file and as friends saying you can fix it by this command

windows users:

npm install --save @react-native-community/toolbar-android

Mac users:

yarn add @react-native-community/toolbar-android

But IN GENERAL: I wanna tell you an experience for you guys whenever you encounter with this kind of errors that start with "Unable to resolve module" .

if you have a look to the error we have a problem with the module that system is telling us.

if you have not that module . you can install it with the commands

Windows users:

npm install --save THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)

and Mac users:

yarn add THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)

for example lets look at this error:

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

as you can see error is telling us this module could not be found within our project. so we need install it with this command: for windows programmers:

npm install --save @react-native-community/slider

and for mac programmers:

yarn add @react-native-community/slider

that's all.

I hope you understand me clearly and do not have problem with unable to resolve module errors and my command be useful for you.

Tann