CODEWITHSUNDEEP
reactjsreact-nativereact-native-vector-icons
Brian H.
Brian H.

Reputation: 1677

react-native-vector-icon show "wrong" icon

I'm using react-native-vector-icons for my React native project. Recently when I open my app, it keep showing the wrong icon that i was filled in the name field or its show that this icon is not exist ("question mark").

I feel really awkward because it just normal in about one or two week later. I keep searching from SOF or their github but feel like no hope.

Can you help me with this.

<Icon
    containerStyle={{
        display: (this.state.email.length > 0) ? 'flex' : 'none',
        marginRight: normalize(10),
    }}
    name="mail-outline"
    type="ionicon"
    color="#7384B4"
    size={22}
    onPress={() => {
        this.setState({ email: '' });
    }}
/>

This is my code, it suppose to show the mail icon, but I`ve got this enter image description here

and this is some related dependency version I've been used in my package.json

"react": "16.9.0",
"react-native": "0.61.3",
"react-native-elements": "^1.2.0",
"react-native-vector-icons": "^7.0.0",

Thanks and have a great day.

Upvotes: 5

Views: 4196

Answers (6)

Jonas
Jonas

Reputation: 1

Had a similar problem, but it must be said that I was working with an external folder where I kept the file I was trying to get the icon to work on and kept the node_modules/react-native-vector-icons for it.

In my case the solution was adding some assets/fonts folders to myProject/android/app/src/main and put the MaterialCommunityIcons.ttf file from the myExternalFolder/node_modules/react-native-vector-icons folder.

Before that I had installed react-native-vector-icons on my actual project (which used the file from the external folder) but when I removed it (the react-native-vector-icons module) again the icons still worked.

Upvotes: 0

Pratik Gondaliya
Pratik Gondaliya

Reputation: 430

To resolve the issue of icons displaying as strange symbols (e.g chienese characters) in your React Native app, you can fix it by linking the necessary fonts from react-native-vector-icons. Simply add the following line to your android/app/build.gradle file inside android block.

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

This ensures that the icons are correctly bundled with your app and displayed as intended.

Upvotes: -1

David Fontes
David Fontes

Reputation: 41

Follow this process:

  1. Open the following file: ProjectDir/android/app/build.gradle

  2. Add the line at the end of the file:

apply from:("../../node_modules/react-native-vector-icons/fonts.gradle");
  1. Run the command: yarn start --reset-cache

Upvotes: 4

Gustavo Garcia
Gustavo Garcia

Reputation: 3263

I had the same problem. It's related to manually linking vs autolinking (new version)

Details on autolinking

Solution: npx react-native unlink react-native-vector-icons npm run android

npm run android actually runs: react-native run-android

Upvotes: 2

Mohamed Salim BOUYA
Mohamed Salim BOUYA

Reputation: 11

This could be caused by outdated icons font files, you may have updated the package version but not the font files. Try to recopy font files from 'Fonts' folder.

https://github.com/oblador/react-native-vector-icons/tree/master/Fonts

Upvotes: 1

flix
flix

Reputation: 1984

You should declare import Icon in specific way,

example: import Icon from 'react-native-vector-icons/Ionicons'

e.g:

import Icon from 'react-native-vector-icons/Ionicons'
//or you can use
//import Ionicons from 'react-native-vector-icons/Ionicons'

//usage

<Icon
    //containerStyle={{
        //display: (this.state.email.length > 0) ? 'flex' : 'none',
        //marginRight: normalize(10),
    //}}
    //i think it should be `style` not `containerStyle`
    //except you are using another lib to show icon
    style={{
        display: (this.state.email.length > 0) ? 'flex' : 'none',
        marginRight: normalize(10),
    }}
    name="mail-outline"
    color="#7384B4"
    size={22}
    onPress={() => {
        this.setState({ email: '' });
    }}
/>

//another way
//<Ionicons
//{...all props you need to define}
///>

Upvotes: 1

Related Questions