React Native Elements Icon Not Showing On Button

Question

Hi,

I am trying to use a Icon in the React-Native-Elements Button component. I am not getting errors or warnings but I just end up with a empty button.

Here is some of my code containing the Button:

<Col size={20}>
    <Button icon={<Icon name="heart" color="#00aced"/>} size={30} buttonStyle={style.button}/>
</Col>

I hope someone can help me because I am not sure why it doesn't show up.

Thanks in advance!

More information as requested:

import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

const style = {
   button: {
        backgroundColor: '#6A5ACD',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%'
      }
}

I've also tried other imports like Fontawesome.

Answer 1

Try this:--

<Col size={20}>
    <Button 
    icon={{name: 'envira', type: 'font-awesome'}} 
    size={30} buttonStyle={style.button}/>
</Col>

If still not getting icon then you have to install the 'react-native-vector-icons'

-- npm install react-native-vector-icons --save 
-- react-native link

Answer 2

for me the Icons were showing perfectly in IOS but in Android it was not getting displayed but

react-native link

did the trick

Answer 3

This worked for me: https://github.com/GeekyAnts/NativeBase/issues/138

Run

react-native link
react-native run-android

Answer 4

The issue is caused by the deprecated/older version of react-native link.

For fix: Open android/app/build.gradle and add the following:

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

Answer 5

Make it arrow func. This work for me

icon={() => <Icon name="chevron-thin-down" size={18} />}