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