How to add font-awesome 5 icons to your React-Native project

It is great weather time in the UK at the moment so I thought i would do another tutorial, this time i will be showing you how to incorporate font-awesome icons into your React-Native project. Here we go!

react-native init myfontawesomeproject
npm i --save react-native-svg
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-native-fontawesome
cd ios && pod install
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
cd ios && pod install
class App extends React.Component{render(){return(<View style={{marginTop:100}}><Text style={styles.centerText}>My font awesome project!</Text></View>)}}
const styles = StyleSheet.create({centerText:{textAlign:'center'}});
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faLock,faAirFreshener,faAnchor } from '@fortawesome/free-solid-svg-icons';
import {faAdobe,faApple,faMicrosoft} from '@fortawesome/free-brands-svg-icons';
<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}></View>
<FontAwesomeIcon icon={faLock} size={40} color={"blue"} />
<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}><FontAwesomeIcon icon={faLock} size={40} color={"blue"} /><FontAwesomeIcon icon={faAirFreshener} size={30} color={"red"} /><FontAwesomeIcon icon={faAnchor} size={50} color={"purple"} /></View>
Output of the font-awesome code from the svg-icons package
<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}><FontAwesomeIcon icon={faAdobe} size={30} /><FontAwesomeIcon icon={faApple} size={30} /><FontAwesomeIcon icon={faMicrosoft} size={50} /></View>
<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}><FontAwesomeIcon icon={faAdobe} size={30} color={'red'} /><FontAwesomeIcon icon={faApple} size={30} color={'grey'} /><FontAwesomeIcon icon={faMicrosoft} size={50} color={'#48dbfb'} /></View>

Software Developer in the UK. With a keen passion for React Native & C#. Blog — https://cowboycode.co.uk/