React-native-vector-icons: 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??

[pineladsn]

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 https://github.com/oblador/react-native-vector-icons/issues/463#issuecomment-317231900, 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: "../../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

[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