cannot load icons in android

[ddinggu]

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

[bpinela]

Facing the same issue here

[ddinggu]

I think app cached missing font data while setting font files during change this module, so I change unload cached fonts like #463 (comment), and use react-native-fs, but those are failed.

[mainak-shil]

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

[szholdiyarov]

hey @ddinggu

have you solved your problem?

[ddinggu]

hey @ddinggu

have you solved your problem?

No. I try to rebuild project and change version, these still were worked.
So, Insert png images..

[mainakCbnits]

Its bad to load png images. If you are loading icons, then you should load vector or svg icons, as it takes low sizes and take less to render

[ddinggu]

@mainakCbnits

Thanks for letting me know :)
Our team doesn't have a designer. And I don't how to change png to svg.

Any Idea png to svg easily?

[mainakCbnits]

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

[szholdiyarov]

@ddinggu The problem might be that the app is not loading icons correctly. Try to manually load icons for Android. Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase fonts folder).

[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: 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

[mayconmesquita]

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.

[shubhamtakode]

If you are using monorepo approach, then you might have to edit the path provided in font.gradle

[yuertongle]

Wired, I faced the same issue on Android simulator, but do following have saved me:

1. react-native link
2. restart the simulator

[raajnadar]

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

[tonypangs]

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

[ledongphuong1999]

Sử dụng lệnh này, lệnh yarn react-native link react-native-vector-iconsnày sẽ chuyển tất cả các tệp cần thiết để tải phông chữ trong cả thư mục android và ios.

Không sử dụng liên kết cmd phiên bản cli mới nhất sẽ ném cảnh báo.

Cách tự động để thêm phông chữ

Thêm đoạn mã này vào android\app\build.gradle. Tôi chỉ muốn MaterialCommunityIcons.ttf nếu bạn muốn phông chữ khác thêm chúng vào đây, nó sẽ được thêm tự động.

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

`apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"`

Đây là cách thủ công (Nếu tự động không hoạt động)

Bước 1

Di chuyển tệp .ttf từ tệp node_modules\react-native-vector-icons\Fontsbạn muốn sang android\app\src\main\assets\fontssau đó cd androidvà chạy ./gradlew cleanhoặcgradlew clean

Bước 2

Thêm dòng này vào 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"

Sau đó, các biểu tượng sẽ được hiển thị. Thử đặt lại bộ nhớ cache nếu nó không hoạt động yarn react-native start --reset-cache&yarn react-native run-android

thank u so much, it works for me, everyone should do it this way

[ssensalo]

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

Thanks @raajnadar just add a small update for the the build.gradle command as below

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

[nidhipate124]

In case someone facing this issue only for fontrello custom fonts.



Solved by adding below in android\app\build.gradle

project.ext.vectoricons = [
	iconFontNames: [‘customFont.ttf'] // <-add name as per your config.json
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

and run
react-native link

[gyt95]

I run yarn android many times and be success finally.