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

Created on 3 Jul 2020  ·  57Comments  ·  Source: oblador/react-native-vector-icons

After upgrading to the new version 6.7.0, bundling fails at:

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.   

Installing the @react-native-community/toolbar-android package solves the error, but I'm not sure if that's the wanted behaviour. It should be mentioned in README at least.

Most helpful comment

For me:
I remove the '^' from :
-"react-native-vector-icons": "^6.6.0" -> "react-native-vector-icons": "6.6.0"
rm -rf node_modules
npm install

All 57 comments

Снимок экрана 2020-07-03 в 20 13 48

getting the same for me as well

for me even after installing yarn add @react-native-community/toolbar-android it does not work

Same issue here, Even tried manually linking everything

This is because create-icon-set is importing toolbar-android which uses @react-native-community/toolbar-android.

for a temporary workaround, you could comment out import createToolbarAndroidComponent from './toolbar-android'; in create-icon-set to get it working. Remember to restart the packager.

@Johan-dutoit Why would a Vector-Icon Library import an Android Toolbar Widget?

@Johan-dutoit Why would a Vector-Icon Library import an Android Toolbar Widget?

Great question...

For me:
I remove the '^' from :
-"react-native-vector-icons": "^6.6.0" -> "react-native-vector-icons": "6.6.0"
rm -rf node_modules
npm install

@brunodias28 Yes, that would be downgrading to the latest working version. This issue is specifically for a bug in 6.7.0

I'm also getting this!

Same issue here after upgrading to 6.7.0

I'm seeing this error as well while running on React Native windows

@oblador can you look at this please? Don't you think #1175 will fix the issue?

So we need to install @react-native-community/toolbar-android by default because of the Usage with ToolbarAndroid

Hey, try out 7.0.0 where Icon.AndroidToolbar has been removed.

@oblador I get the following error after upgrading to 7.0.0:

error: Error: Unable to resolve module `./toolbar-android` from `node_modules/react-native-vector-icons/lib/create-icon-set.js`: 

None of these files exist:
  * node_modules/react-native-vector-icons/lib/toolbar-android(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * node_modules/react-native-vector-icons/lib/toolbar-android/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

Same problem here after upgrading to 7.0.0

@oblador I get the following error after upgrading to 7.0.0:

error: Error: Unable to resolve module `./toolbar-android` from `node_modules/react-native-vector-icons/lib/create-icon-set.js`: 

None of these files exist:
  * node_modules/react-native-vector-icons/lib/toolbar-android(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * node_modules/react-native-vector-icons/lib/toolbar-android/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

@xxczaki @hudaprs try to --reset-cache your metro server

@xxczaki @hudaprs try to --reset-cache your metro server

Amazing, get back to work again, Thanks!

After upgrading to the new version 6.7.0, bundling fails at:

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.   

Installing the @react-native-community/toolbar-android package solves the error, but I'm not sure if that's the wanted behaviour. It should be mentioned in README at least.

"react-native-vector-icons": "^7.0.0",
you must delete react-native-vector-icons in " node_modules/native-base/node_modules/react-native-vector-icons"
my application can run again after I do it

You're getting those errors because the toolbar module is still in metro's cache.

To fix this, run:

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

@brunodias28
Amazing, thanks.

After upgrading to the new version 6.7.0, bundling fails at:

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.   

Installing the @react-native-community/toolbar-android package solves the error, but I'm not sure if that's the wanted behavior. It should be mentioned in README at least.

It's true, But the icon will be changed if the @react-native-community/toolbar-android package will be install. (IOS)

for me even after installing yarn add @react-native-community/toolbar-android it does not work

This worked for me

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

this fixed it for me

i got this error when my app build in circleci/fastlane. but no error when im running it locally

image

Dear friends, I posted a Stack Overflow answer for the solution of this current issue. definitely I will update it in the near future.

@slavikdenis, @aspidvip, @john1jan, @rishikeshgaikar, @Johan-dutoit, @mrousavy, @LuigiMaestrelli, @brunobar79, @kafinsalim, @DallasCarraher, @carloscfcortez, @chayankiit, @sudokzt, @llaonee, @hudaprs, @exneval, @xxczaki, @gvillenave, @crutchcorn

@amerllica

You don't need to install toolbar-android.
The version 7.0.0 fixes the problem.

As mention above, you may need to clear some caches, but it is working fine on Android and iOS without the dependency

@LuigiMaestrelli, I installed version 7.0.0 and the problem still existed. For now, the right solution is installing toolbar-android.

@amerllica as already mentioned multiple times, you need to clear your cache. see my comment above.

@mrousavy, I see your multiple times mentions but clearing caches didn't help me. so this is not a global solution. this is your solution.

The solution of @amerllica is good. Be carefull that another library do not use also react-native-vector-icons. For me it was native-base that used the version 6.7.0. You can force the version with this tips in the package.json:

 "resolutions": {
    "native-base/react-native-vector-icons": "6.6.0"
  },

You're getting those errors because the toolbar module is still in metro's cache.

To fix this, run:

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

thank you.

This is what worked for me...

1) delete entire project directory
2) clone a new copy
2) yarn
4) npx pod-install
5) yarn ios

and I was back up and running.

What worked for us is to downgrade native-base to before they required the updated broken version of react-native-vector-icons. This is not the ideal solution for sure.

Some of us don't have the luxury of the resources to keep our apps completely up to date with the release of packages. We usually update react-native and our packages once a year.

Dear @john1jan, I install toolbar-android by using this command:

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

and everything gets back on track.

see complete solution on Stack Overflow

LOL Works for me!!! Thanks man

yarn add @react-native-community/toolbar-android
this worked for me using react-native 0.61.0 and react-native-vector-iicons 7.0.0

Dear @john1jan, I install toolbar-android by using this command:

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

and everything gets back on track.

see complete solution on Stack Overflow

it works, thank you

You're getting those errors because the toolbar module is still in metro's cache.

To fix this, run:

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

if this problem still exist just please go to package.json file and remove ^ from _react-native-vector-icons_
like "react-native-vector-icons": "6.6.0"
and then folow the above steps.

Downgrade to 6.6.0 solved my problem

Personal mine even after updating to version 7.0.0
"react-native-vector-icons": "^7.0.0",

and install the
"@react-native-community/toolbar-android": "0.1.0-rc.2",

Didn't solve, how do I proceed?

I'm with React-Native 0.62 CLI

Thank you.

image

Dear @RBalconi, please read whole the conversation. my solution can help you now. but a few later I will update the SO post.

I managed to solve it, redid the method, upgraded to 7.0.0 and cleared the cache with:

npm start -- --reset-cache

Thank you

For me:
I remove the '^' from :
-"react-native-vector-icons": "^6.6.0" -> "react-native-vector-icons": "6.6.0"
rm -rf node_modules
npm install

thanks @brunodias28 , it didn't work for me at first, but after removing package-lock.json file, it worked; don't know why.

Hi, the problem is in android only: "Tried to register two views with the same name ToolbarAndroid"
i already added
@react-native-community/toolbar-android": "0.1.0-rc.2
"react-native-vector-icons": "6.6.0"

How do I solve this problem?

image

I've solved this issue doing this:

  1. delete node_modules

rm -rf node_modules/

  1. remove version 6.7.0 of react-native-vector-icons
    in the package json changes to version 7.0.0 like this:

"react-native-vector-icons": "^7.0.0"

  1. install node_modules

npm i

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

  2. Run like this npm start:

npm start -- --reset-cache

Just Import it direct from react native it solves my problem

_node_modulesreact-native-vector-icons\libtoolbar-android.js_

import { ToolbarAndroid } from 'react-native';

for me even after installing yarn add @react-native-community/toolbar-android it does not work

it's working for me

I'm still getting build error in XCode, using React Native 0.63.2, toolbar-android 0.1.0-rc.2 and react-native-vector-icons 7.0.0. I don't understand why a vector icon library needs to use Android Toolbar. Why does it uses for iOS build?!

I'm still getting build error in XCode, using React Native 0.63.2, toolbar-android 0.1.0-rc.2 and react-native-vector-icons 7.0.0. I don't understand why a vector icon library needs to use Android Toolbar. Why does it uses for iOS build?!

if this problem still exist just please go to package.json file and remove ^ from react-native-vector-icons
like "react-native-vector-icons": "6.6.0"

For my case, the project was using @native-base and it brings the latest version of @native-base/react-native-vector-icons ... and at the same time forced to install dependency @react-native-community/toolbar-android
solution when using native-base:

add resolutions on package.json:

    "resolutions": {
        ...,
        "react-native-gesture-handler": "1.2.1",
        "react-native-vector-icons": "6.6.0"
    },

Ok...so please try to install toolbar-android

On Mon, 24 Aug 2020, 7:15 am Marcelo Muñoz Rodriguez, <
[email protected]> wrote:

For my case, the project was using @native-base and it brings the latest
version of @native-base/react-native-vector-icons ... and at the same time
forced to install dependency @react-native-community
https://github.com/react-native-community / toolbar-android
solution when using native-base:

add resolutions on package.json
"resolutions": { ..., "react-native-gesture-handler": "1.2.1",
"react-native-vector-icons": "6.6.0" },


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/oblador/react-native-vector-icons/issues/1193#issuecomment-678868311,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHLIIRHCQ25KBGWG4FXL2JTSCHELLANCNFSM4OPUUBGQ
.

I'm still getting build error in XCode, using React Native 0.63.2, toolbar-android 0.1.0-rc.2 and react-native-vector-icons 7.0.0. I don't understand why a vector icon library needs to use Android Toolbar. Why does it uses for iOS build?!

if this problem still exist just please go to package.json file and remove ^ from react-native-vector-icons
like "react-native-vector-icons": "6.6.0"

I've already done that, for version 7.0.0 using RN 0.63.2 and still getting build error for iOS.

Why does it needs Android Toolbar on iOS? For Android it seems OK, but for iOS?!

I'm still getting build error in XCode, using React Native 0.63.2, toolbar-android 0.1.0-rc.2 and react-native-vector-icons 7.0.0. I don't understand why a vector icon library needs to use Android Toolbar. Why does it uses for iOS build?!

if this problem still exist just please go to package.json file and remove ^ from react-native-vector-icons
like "react-native-vector-icons": "6.6.0"

I've already done that, for version 7.0.0 using RN 0.63.2 and still getting build error for iOS.

Why does it needs Android Toolbar on iOS? For Android it seems OK, but for iOS?!

please delete your app from device , close bundler , remove cache, remove node-module and lock file, remove pod folder and lock file from ios floder, then run command.

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, runningreact-native start --reset-cache
Good luck.

@lamson-dev Thank you. This did the trick.
I also had to run:
react-native unlink react-native-vector-icons
to get thinks working again, because I had auto-linked in the past.

At last, this issue is fixed on version "7.1.0", and there is no need to install @react-native-community/toolbar-android directly.

For more explanation see this StackOverflow post.

You're getting those errors because the toolbar module is still in metro's cache.

To fix this, run:

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

It worked for me. thanks

Was this page helpful?
0 / 5 - 0 ratings