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
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.
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
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}
///>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With