react-native-vector-icons: cannot load icons in android

Environment

android, react-native 0.61.5, react-native-vector-icons 6.6.0, react-native-navigation v4

Description

I used rnn v4 and setting on tab icons.

import { PixelRatio } from 'react-native';
import DefaultIconProvider from 'react-native-vector-icons/EvilIcons';

import { isIphone } from 'constants/deviceinfo';

const navIconSize = isIphone ? 35 : PixelRatio.getPixelSizeForLayoutSize(35);

// Remove size string
const replaceSuffixPattern = /--(active|big|small|very-big)/g;
const icons = {
	'sc-youtube': [navIconSize],
	user: [navIconSize],
	gear: [navIconSize],
	search: [25],
	'chevron-right': [25],
};

const iconsSource = new Map();
const iconsLoaded = async () => {
	const sources = await Promise.all(
		Object.keys(icons).map(iconName => {
			const Provider = icons[iconName][1] || DefaultIconProvider;
			return Provider.getImageSource(
				iconName.replace(replaceSuffixPattern, ''),
				icons[iconName][0],
			);
		}),
	);

	Object.keys(icons).forEach((iconName, idx) => (iconsSource[iconName] = sources[idx]));

	return true;
};

(This is how I load icons for use tab button icons)

follow instructions and other solution issues, but simulators and real devices cant load icons like this.

I try to reinstall with cleaning project and also move to new react-native project, but don’t know why still can’t load icons.

Does anyone know a solution to this problem??

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 19 (2 by maintainers)

Most upvoted comments

~~Use this command yarn react-native link react-native-vector-icons this will transfer all the files necessary to load the fonts in both android & ios folder.~~

Don’t use link cmd the latest cli version will throw warnings.

Automatic way to add fonts

Add this piece of code in android\app\build.gradle. I only want MaterialCommunityIcons.ttf if you want other font add them here it will be added automatically.

project.ext.vectoricons = [
	iconFontNames: ['MaterialCommunityIcons.ttf'] // Add fonts needed
]

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");

This is manual way (If automatic didn’t work)

Step 1

Move the .ttf file from the node_modules\react-native-vector-icons\Fonts that you want to android\app\src\main\assets\fonts after that cd android and run ./gradlew clean or gradlew clean

Step 2

Add this line in android\app\build.gradle

project.ext.vectoricons = [
	iconFontNames: ['MaterialCommunityIcons.ttf', 'AnotherFont.ttf'] //name of all the fonts added from node_modules in step 1.
]

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");

After that the icons will be visible. Try resetting the cache if it did not work yarn react-native start --reset-cache & yarn react-native run-android

+43

raajnadar on Sep 15, 2023

react-native link and re-run project works for me.

+12

mainak-shil on Jan 19, 2020

See this… https://www.npmjs.com/package/react-native-vector-icons

mainakCbnits on Feb 5, 2020

@yuertongle link is deprecated use autolinking. Check my solution. RN 60 onwards the native dependencies get autolinked.

raajnadar on Apr 9, 2020

I was getting this issue in my project. The solution here was: delete the old APK and reinstall a new one. Seems like a font cache.

mayconmesquita on Feb 28, 2020

~Use this command yarn react-native link react-native-vector-icons this will transfer all the files necessary to load the fonts in both android & ios folder.~

Don’t use link cmd the latest cli version will throw warnings.

Automatic way to add fonts

Add this piece of code in android\app\build.gradle. I only want MaterialCommunityIcons.ttf if you want other font add them here it will be added automatically.
project.ext.vectoricons = [
	iconFontNames: ['MaterialCommunityIcons.ttf'] // Add fonts needed
]

`apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"`
This is manual way (If automatic didn’t work)

Step 1

Move the .ttf file from the node_modules\react-native-vector-icons\Fonts that you want to android\app\src\main\assets\fonts after that cd android and run ./gradlew clean or gradlew clean

Step 2

Add this line in android\app\build.gradle
project.ext.vectoricons = [
	iconFontNames: ['MaterialCommunityIcons.ttf', 'AnotherFont.ttf'] //name of all the fonts added from node_modules in step 1.
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
After that the icons will be visible. Try resetting the cache if it did not work yarn react-native start --reset-cache & yarn react-native run-android

It works for me, thanks! I guess adding project.ext.vectoricons is the critical solution. Do not use react-native link, it leads to errors

tonypangs on Dec 9, 2020