react-native-vector-icons: 6.7.0 breaks Icons

Description

When upgrading to 6.7.0 the Icons (MaterialCommunityIcons) won’t display correctly anymore. I got question-mark boxes as well as arabic characters all over the place. Didn’t do anything except upgrade and install pods. I even tried cleaning the cache (Pods/, Build folder, node_modules, Metro Bundler cache) and did a full re-install, nothing seems to work.

Downgrading to 6.6.0 makes all my icons appear again.

I’ve set it up using Autolinking, so no extra steps except adding the Icons I want in my Info.plist, which consists only of one item: MaterialCommunityIcons.

Steps to reproduce

# Icons work
npm update
cd ios; pod install; cd ..
# Icons don't work anymore

Environment

react-native info:

info Fetching system and libraries information...
(node:7774) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 6.29 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.0, 30.0.0
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 21.2.6472646
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 29 (9 by maintainers)

Most upvoted comments

@danilo900 Cheers, thanks! I ended up removing react-native-vector-icons, all entries relating to react-native-vector-icons in yarn.lock, ios/Podfile, ios/Podfile.lock and yarn.lock. Cleared watchman cache. Re-added react-native-vector-icons. Reinstalled node modules, reinstalled pods. After this everything is fine. Now I can hunt for all ionicons that changed their name. Edit: for Android I needed to copy the font files over like you said (from node_modules/react-native-vector-icons/Fonts/ to android/app/src/main/assets/fonts).

thijs-qv on Jul 14, 2020

Copying Android assets worked for me. Clearing caches alone did not help.

tapz on Jul 16, 2020

@oblador I feel you. You create something in your own time to help people, only to end up with (sometimes not so nicely worded) comments when something breaks and little to no support. Enjoy your holiday.

@vladp I saw the remark in the PR, and the name changes of Ionicons v5. Seems my issue is different from this: after updating to 7.0.0 (from 6.6.0) icon-names now render the incorrect icon (as I mentioned before, for example ios-funnel is now a bluetooth icon), which can’t be fixed by adjusting the icons to the new names where needed. Looks like I’m not the only one having this issue. Removing react-native-vector-icons and readding it to the project doesn’t seem to help, I suspect some old files are still left somewhere. Since I have no immediate need for the icons added in 7.0.0, I went back to 6.6.0 but it would be nice to update sometime in the future.

Just to help you about v7. I was having trouble either when I upgraded from v6.6. Well, Dunno what exactly I did but: 1: Uninstall the vector-icons

2: rm -rf node_modules && rm -rf package.lock.json && rm package-lock.json && rm -rf ios/Pods/ && rm iOS/Podfile.lock
3: watchman watch-del-all && react-native start --reset-cache

For now you have everything clean, then: 4: npm I 5: install the new version of vectors-icon 6: COPY the FONTS FILES from node_modules to your project (android/src/main/assets/fonts) if it not be auto linked 7: cd ios && pod install && cd … 8: start.

Well worked here, I just needed to change some icons names.

danilocanalle on Jul 14, 2020

@tapz The change in icon names come from the new version of Ionicons. I’m sure they have reasons for doing the change, but I’m not sure really.

I’ve been holding off upgrading due to this reason, but I’ve been getting a lot of pressure and angry comments about not having upgraded yet. So I caved when I had to introduce other breaking changes regardless. The work needed to refactor the whole library to allow individual versioning of the fonts is quite big and I made an experiment to see if anyone was up for sponsoring me to allow me to work more on open source - in an ideal world, full time. Despite having several millions of downloads, almost nobody seems to be willing to contribute financially, just with sarcasm. It doesn’t make me overly motivated, so I’ll probably go back to my vacation now.

oblador on Jul 13, 2020

In 7.0.0: Ionicons ios-help-circle-outline, which should show a question mark inside a circle shows a filled paw (in Android).

tapz on Jul 5, 2020

I updated from 6.6.0 to 7.0.0, and this has caused some icons to change (e.g. ios-funnel is now a bluetooth icon, wth). Is this caused by caching / incorrectly updating or is this caused by the name changes? Changing back to 6.6.0 fixes the issue. How can I upgrade correctly?

thijs-qv on Jul 13, 2020

@vladp This is the only out I see. I think however icon names should not change after each version. This will only keep breaking things @oblador.

wmonecke on Jul 12, 2020

I updated to 7.0.0and icons have been updated to new styles that don’t match the app UI. Also, I have mapped the icon ids to certain elements. This totally breaks it.

wmonecke on Jul 5, 2020

Confirmed that this is the case on Android only. Works fine on iOS.

mars-lan on Jul 3, 2020