Use Font Awesome with react-native-elements

Question

I want to use react-native-element with a react native app. First, I installed the react-elements which was successful. Now I'm trying to use an Icon with the type as font-awesome. But icons are not displaying properly. Should I need to separately install font-awesome as well in order to get the icons working? Or am I missing something here. Here is my code,

<Icon
    raised
    name='heartbeat'
    type='font-awesome'
    color='#f50'
    onPress={() => console.log('hello')} />

Thanks!

can you post the logs? if the icons are not displaying there should be a warning or error printed. — Mohammed Alawneh
Nope nothing printed on console as errors or warnings. It just displays crossed placeholder instead the icon. — Wijitha
Did you try different icon names? try "heartbeat" as they are using it in the official documentation. react-native-training.github.io/react-native-elements/docs/… — Mohammed Alawneh
I just tried with a clean project. Installed react-native-elements, then react-native-vector-icons. Then linked it using react-native link react-native-vector-icons. Worked for me. If it still won't work for you, it'd probably be best to unlink it, remove the node_modules folder and reinstall everything through npm i. — Maximilian Krause
@MaximilianKrause: Its working! Thanks mate. Please post it as an Answer - so that I can mark it. — Wijitha

Maximilian Krause Maximilian Krause · Accepted Answer · 2019-09-08T10:53:22

react-native-elements requires the react-native-vector-icons to be installed manually if you're not using Expo or create-react-native-app. See the documentation (React Native CLI) for more info.

After you've installed both packages, you need to link react-native-vector-icons (as you can see in the README of the GitHub repo). The easiest method to do so is by doing this:

react-native link react-native-vector-icons

Afterwards, everything should work. If you've already done all of this and it's still not working, please delete the node_modules folder and reinstall your node packages by using npm i. If it's still not working, try to manually link the package (you can find a guide on how to do so on the GitHub repo linked above).

Use Font Awesome with react-native-elements

1 Answers