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??

[raajnadar]

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

[mainak-shil]

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