5

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.

Brian H.
  • 1,603
  • 11
  • 16

4 Answers4

2

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

Gustavo Garcia
  • 1,905
  • 1
  • 15
  • 27
1

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}
///>
flix
  • 1,688
  • 3
  • 34
  • 64
1

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

Mohamed Salim BOUYA
  • 11
  • 1
1

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
Anonymous
  • 835
  • 1
  • 5
  • 21
David Fontes
  • 11
  • 1