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
mrousavy
All 29 comments
Confirmed that this is the case on Android only. Works fine on iOS.
mars-lan
on 3 Jul 2020
@mars-lan I haven't tested on Android yet, but for me the issue does occur on iOS.
mrousavy
on 3 Jul 2020
Occurs for us on Android
Haven't tested iOS yet
pbassut
on 3 Jul 2020
@mrousavy Sorry didn't read the full description. Question marks means the icon name has changed. e.g. what used to be called settings is now cog. What I'm referring to is complete missing of icons on Android.
mars-lan
on 3 Jul 2020
Turns out that auto link doesn't work fully for Android. Still needed to do this step to get the icons working on Android: https://github.com/oblador/react-native-vector-icons#option-with-gradle-recommended
mars-lan
on 3 Jul 2020
Most likely the font is out of date from the source cause it was copied into the project. Update the copy or use it from source directly.
oblador
on 4 Jul 2020
EDIT: Nevermind, I'm dumb. I stashed my changes before re-installing pods. On 7.0.0 everything works fine, thanks @oblador !
@oblador Can you elaborate a bit more?
I've tried running:
rm -rf node_modules && rm -rf package.lock.json && rm -rf ios/Pods/
# Cleaning Build Folder in Xcode
npm i
cd ios && pod install && cd ..
react-native start --reset-cache
I'm on 7.0.0 now, but the Icons are still not read correctly:
mrousavy
on 4 Jul 2020
Also seeing broken icons (question marks)
But for my case, it seems that, what happened is the icon names changed, at least in Ionicons.
Using react native web (0.12.3) and Ionicons.
Tried RNVI 6.7, 7.0 and git master branch tip (as of July 3rd).
Not all icons are broken, however.
For example,
'md-home', 'md-book' work
but 'md-arrow-round-forward' and 'md-round-arrow-back' are broken
When change name, for example 'md-round-arrow-back' to 'arrow-back' -- it starts working.
So I will just upgrade to 7.0, and change all names to whatever the new names are
vladp
on 4 Jul 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 5 Jul 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 5 Jul 2020
Omg... how can we have names changed in the new version?!
Iam getting totally wrongs icons here either.
danilo900
on 8 Jul 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).
I was using some ios- Icons either, I needed to change all of them :/
danilo900
on 8 Jul 2020
I was using some ios- Icons either, I needed to change all of them :/
How did you change the names? I tried to look what changes had been done after the last version I used, and could not find any changes in the ios icon names.
tapz
on 9 Jul 2020
I was using some ios- Icons either, I needed to change all of them :/
How did you change the names? I tried to look what changes had been done after the last version I used, and could not find any changes in the ios icon names.
I was using some iOS-arrows, I changed to react-native-vector-icons/Entypo: chevron-down chevron-left
danilo900
on 9 Jul 2020
I manually run ever part of the application, if I see a question mark, I go to source file where the name is defined.
Then, I visualize what it meant (eg arrow, home, etc). Then go to https://ionicons.com/ and search for it, get new name
Pretty manual, laborious, error prone process -- sorry do not have anything better to suggest.
I am not aware of any transition map between old and new names.
How did you change the names? I tried to look what changes had been done after the last version I used, and could not find any changes in the ios icon names.
vladp
on 10 Jul 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 12 Jul 2020
Totally unacceptable to rename the icon ids! How does that benefit anybody? Just waste of time to search the new ids. Maybe I just downgrade and never upgrade again. Looks like there are no improvements, just the opposite.
tapz
on 12 Jul 2020
How did you change the names? I tried to look what changes had been done after the last version I used, and could not find any changes in the ios icon names.
help-circle-outline does not seem to work any better than ios-help-circle-outline, even though help-circle-outline is what I can see in https://ionicons.com/ .
tapz
on 12 Jul 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 13 Jul 2020
Yeah, the update broke the icons for me as well forcing me to go back to last year's version 6.6.0. Really sucks.
deggertsen
on 13 Jul 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 13 Jul 2020
@oblador than you for your work sofar.
WRT financial support, I think you are right. We depend on your work but largely ignore your time and needs.
The PR introduced by @arstropica brought in the new changes to Ionicons, where they also noted the breaking change.
I can see it now.
Unfortunately, for me, I have to upgrade to 7.0 because of the AndroidToolbar removal from RN ..
https://github.com/oblador/react-native-vector-icons/pull/1176
The Using TTF font & glyph map from #1128 (comment).
Reverted ttf font name from 'fontcustom' to Ionicons.
Added platform prefix aliases: "md-" & "ios-" to glyph map.
Caveat: Not backwards compatible with v4 since Iconic have rearranged (and deleted) some glyph map references.
Upgrade of Ionicons was requested by a lots of people (eg 31 upvotes just in one thread)
https://github.com/oblador/react-native-vector-icons/issues/1145
P.S. for folks using Ionicons, I found a change log that indicates icon names that were changed
https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md#500-2020-01-15
(see change in 5.0.0 release)
vladp
on 13 Jul 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.
thijs-qv
on 14 Jul 2020
@vladp A workaround can be found by creating a custom icon component using the instructions in https://github.com/oblador/react-native-vector-icons#custom-fonts.
Add or copy the old glyphmap in your project as well as the old icon ttf and then pass them to the createIconSet method.
arstropica
on 14 Jul 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.
danilo900
on 14 Jul 2020
@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 14 Jul 2020
@oblador communication really helps so that we know what's going on. So thank you for your responses. I personally am new to this module, but am usually happy to help contribute in different ways when possible. Thanks for pushing out the update. I know open-source can be thankless work as I've worked on Drupal modules for many years so I feel you.
deggertsen
on 14 Jul 2020
Closing this since 7.0.0 fixes this issue (after clearing cache)
mrousavy
on 15 Jul 2020
Copying Android assets worked for me. Clearing caches alone did not help.
tapz
on 16 Jul 2020
Related issues
AbhayVarshney
路
3Comments
lossen
路
4Comments
peacechen
路
3Comments
jszcl
路
3Comments
semnyqu
路
3Comments
Most helpful comment
@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).