Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong Vector Icon Resources

See original GitHub issue

Issue Description

Can’t display correct Icons due to evident mismatch between internal react-native-vector-icons version and copied “Fonts” resources. Specifically, Feather icons are periodically broken (in the current version of Native Base, they are broken).

This issue is related to #2453, #2528 and probably others but, in my opinion, the problem is not addressed in the right way.

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: 10.15.3 npm: 6.4.1 react-native: 0.60.5 react: 16.8.6 native-base: 2.13.5 expo: not used xcode: 10.3 (10G8)

Expected behaviour

Install and link Native Base as intended and get the correct Icons displayed.

Actual behaviour

After normal installation I get wrong mapped icons or even not mapped icons at all.

Steps to reproduce (ios for convenience)

yarn add native-base
react-native link native-base
cd ios && pod install
Render the Feather clock icon displays a cute storm icon, for example…

Is the bug present in both iOS and Android or in any one of them?

Both platforms are affected.

Any other additional info which would help us debug the issue quicker.

If I replace the correct react-native-vector-icons Fonts (now the correct version is the 6.1.0), everythig works as expected.

Isn’t more maintainable to rely directy on react-native-vector-icons resources instead of copy them in native-base? Or at least is important to replace all vector icons resources every time the internal react-native-vector-icons dependency is updated!

Thanks for your help!

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:7 (2 by maintainers)

Top GitHub Comments

5reactions

congzhou09commented, Aug 29, 2019

I meet the same issue with react-native@0.60.5 and native-base@2.13.5 in Android. Feather icon names do not match the icons.

The “package.json” file of native-base@2.13.5 says it depends on react-native-vector-icons@6.1.0, which is installed correctly. But the *.ttf files in “android\app\src\main\assets\fonts” are not copyed from “node_modules\react-native-vector-icons\Fonts”, yet from “node_modules\native-base\Fonts” in the process of linking, and *.ttf files from the two places are not the same. This is the reason.

Hope for official repair.

Temporary&Manual fix: After the process of linking, replace *.ttf files in “android\app\src\main\assets\fonts” with *.ttf files in “node_modules\react-native-vector-icons\Fonts”.

1reaction

sankhadeeproy007commented, Sep 3, 2019

Can you check with with 2.13.6?

Top Results From Across the Web

Right Wrong Vector Art - Vecteezy

Browse 2219 incredible Right Wrong vectors, icons, clipart graphics, and backgrounds for royalty-free download from the creative contributors at Vecteezy!

Wrong Vector SVG Icon (3) - SVG Repo

Free Wrong Vector Icon in SVG format. ✓ Download Free Wrong Vector and icons for commercial use. Wrong SVG vector illustration graphic art...

Jetpack Compose: Custom VectorAsset Icon object similar to ...

It looks like the only way to go about loading custom icons from Android Vector Resources in the res folder ...

Wrong Vector Icons free download in SVG, PNG Format

Author: Du. License: Free for personal and commercial purpose. Icons in pack: 27 icons. Maxmuim size available: 512px. Icon format available: SVG, PNG ......

Resources in Compose - Android Developers

... Vector assets and image resources; Animated Vector Drawables; Icons; Fonts. Jetpack Compose can access the resources defined in your Android project.