Icons not showing on IOS app

[onurdegerli]

Environment

Target platform: IOS

    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-vector-icons": "^8.1.0",

Description

Icons are not shown on the TestFlight mode on the Apple store even though they are working fine in Expo and Xcode simulator. I have followed everything in the list here https://github.com/oblador/react-native-vector-icons#ios as well as creating a new group and adding all *.ttf files to the new group that is called Fonts. Is there anything else that I am missing out?

Code

import Icon from "react-native-vector-icons/MaterialIcons";
...
<Icon name="save" size={20} />
...

Demo

Xcode project

App on the Apple store TestFlight

Expo

[laogui]

add code to ios/AppName/Info.plist

	<key>UIAppFonts</key>
	<array>
		<string>AntDesign.ttf</string>
		<string>Entypo.ttf</string>
		<string>EvilIcons.ttf</string>
		<string>Feather.ttf</string>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>Fontisto.ttf</string>
		<string>Foundation.ttf</string>
		<string>Ionicons.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
		<string>MaterialIcons.ttf</string>
		<string>Octicons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
		<string>Zocial.ttf</string>
	</array>

[onurdegerli]

@laogui

They are already in the file.

[onurdegerli]

In the manual, it is written like below

Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

I am running the command below to create a new build. Should I run a different command?

expo build:ios

[onurdegerli]

The podfile is

  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker'

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

  post_install do |installer|
    flipper_post_install(installer)
  end

[jungyubl]

@onurdegerli were you able to find a solution to this? I'm having the exact same problem and cannot find a way to fix it

[onurdegerli]

@jungyubl Nope. Couldn't find any solution.

[jungyubl]

@onurdegerli I've been stuck with this exact same issue for the past few days and it's driving me crazy now. I have the same issue where the icons won't show (not even in ? or X in release or TestFlight version).

I have tried:

• rm -rf node_modules & Pods, Deleted lock files and reinstall them - didn't work
• Manually linking by adding fonts to info.Plist
• Manually linking by adding fonts to Copy Bundle Resources in Build Phases
• Manually linking by adding fonts to [CP] Copy Pod Resources
• Adding a separate Fonts folder

None of these solutions worked for me - the build works fine and I was able to run them on release versions and archive them to send the file to the end, but the icons do not show up. When I delete the app and run them again on my device in debug mode, it starts with no dev server available error message, but when I load again, it starts up and shows the icons. This suggests that the Icons are not being loaded in the first build (which I believe is the release version).

I'm running out of ideas to try. Any suggestions would be greatly appreciated.

@onurdegerli How did you get around this?

[onurdegerli]

@jungyubl I couldn't get around. I have just stopped implementing it and left it as-is. It doesn't make sense that doesn't work even tho we apply everything which is suggested by the repo owner.

If the icons are not loaded in the first build, does it mean that we have to upload a second build with a different version number? Because it isn't possible to build it with the same version number. Not sure if I get it correctly.

I had followed the same steps which you tried, too.

[ronaldborla]

any other solution for this?

[onurdegerli]

Using Flutter @ronaldborla

[ariannargesi]

I have some kind of similar issue. Everything work fine on android. But on the ios I get '"Feather" is not recognised' error

[ronaldborla]

I'm using expo and I finally solved this issue by upgrading the version to Expo 41, so it upgraded a lot of dependencies. But some significant change for iOS are:

1. The updated ios version in the Podfile, from '10.0' to '11.0' (just change platform :ios, '10.0' to platform :ios, '11.0')
2. Updated cocoa pods to latest version: gem install cocoapods (or use sudo)
3. cd ios then pod install

The icons appeared correctly now for me on production build

[stewartmcgown]

We're seeing this in all release builds too. Tried calling loadFont for the families like FontAwesome5 but this causes a runtime crash. Might be that we are missing some step but as far as I can tell the pod resources are linked and copied correctly 😕

[Arthur092]

Is there any update on this issue?, I am facing the same

[gulshankumarsolcall]

pod install worked for me 👍

STEPS cd ios && pod install

[MaryamKhan05]

I am facing the same issue, Is Anyone who can help??

[ShahululFaris]

Same issue for me. Any solution ?

[coolersham]

Strangely it only affects the following icon sets: EvilIcons, Octicons, Zocial, MaterialIcons, MaterialCommunityIcons and Foundation.

[liquidvisual]

I ran into this today when I had to disable flipper to use react-native-firebase. It couldn't find FontAwesome afterwards. This post saved me though:

https://github.com/oblador/react-native-vector-icons/issues/1062#issuecomment-1345982166

[minhle10]

I was able to solve this issue by adding the actual font files from the Fonts folder under the Copy Bundle Resources tab (inside [App Name].xcworkspace), whereas before, I just had the "Fonts" folder there with the font files inside.

Hope this helps someone because I spent hours trying everything mentioned above to no avail 😭

[KayyDhex]

The podfile is

  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker'

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

  post_install do |installer|
    flipper_post_install(installer)
  end

it works for me

[usamadevops]

@laogui For me Copy pasting worked. I pasted this on the top Killed the app.

Pod install

And then again

yarn run ios

[Achmad-M]

@laogui

They are already in the file.

for android :

if the name on Google says expand_more then change name = “expand-more” change the _ sign to - that's work for me

[reehlittle]

I was able to solve this issue by adding the actual font files from the Fonts folder under the Copy Bundle Resources tab (inside [App Name].xcworkspace), whereas before, I just had the "Fonts" folder there with the font files inside.

Hope this helps someone because I spent hours trying everything mentioned above to no avail 😭

Thanks @minhle10, it worked for me.

The current Readme says Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode, but to be able to add the fonts under Copy Bundle Resources tab I had first to create the Fonts folder, following this, and after that dragging the fonts in.

[danielJunio0]

Add this line in your PodFile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

then run cd ios && pod install

Works for me!

[VaitheeswariVS]

I solved the issue icon not showing do the following process

1. Create / Update the react-native.config.js add the following lines module.exports = { project: { ios: {}, android: {}, }, assets: [ ‘./assets/fonts’ ], // change the path as per your project };

2.Check the info.plist the following lines are included

*** <key>UIAppFonts</key>
<array>
	<string>AntDesign.ttf</string>
	<string>Entypo.ttf</string>
	<string>EvilIcons.ttf</string>
	<string>Feather.ttf</string>
	<string>FontAwesome.ttf</string>
	<string>FontAwesome5_Brands.ttf</string>
	<string>FontAwesome5_Regular.ttf</string>
	<string>FontAwesome5_Solid.ttf</string>
	<string>Fontisto.ttf</string>
	<string>Foundation.ttf</string>
	<string>Ionicons.ttf</string>
	<string>MaterialCommunityIcons.ttf</string>
	<string>MaterialIcons.ttf</string>
	<string>Octicons.ttf</string>
	<string>SimpleLineIcons.ttf</string>
	<string>Zocial.ttf</string>
</array> ***

3.Pod install and npm run ios

[Eprince-hub]

@VaitheeswariVS please can you clarify this part assets: [ ‘./assets/fonts’ ], of the solution you provided? Do i need to create this assets/fonts folders myself? I am using yarn workspace/monorepo and I would like to understand it so that i can try to apply it to my problem. I currently don't have any of that folder in my application. have been stuck with this issue for days now.

[VaitheeswariVS]

Hi @Eprince-hub, Yes, you have to create a folder for yourself to store the images, icons, and custom font files. Actually, I have  mentioned this solution for not showing icons on iOS devices. When you are using the react-native-vector-icons npm packages in your project, the following solution helps to display the icons:

Refer to this NPM: react-native-vector-icons. In that, they have mentioned that to create the react-native.config.js file, add the following code: module.exports = { dependencies: { 'react-native-vector-icons': { platforms: { ios: null, }, }, }, };

But, the icons are not visible on iOS devices, so I replaced them with the following code, and it works for me.

module.exports = { project: { ios: {}, android: {}, }, assets: [ ‘./assets/fonts’ ], // change the path as per your project };

[djleonskennedy]

In my case icons don't appear in the release build in dev mode all working well

[shubhanshubb]

Add this line in your PodFile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

then run cd ios && pod install theni install npx react-native run-ios

Works for me!