Joseph Jude

Consult . Code . Coach

Using 3rd Party Libraries in React Native


code . nodejs . rn . react

Though React Native is relatively new, a large ecosystem has grown around it. Awesome React Native is just one list that documents the ever growing ecosystem. In this tutorial, we will learn to use one of the library from this ecosystem.

3rd Party Libraries in React Native

FontAwesome is a popular font toolkit for the web. Joel Arvidsson has created a version that can be used with React Native. We will use this library to display an icon in our app.

We will base our discussion on what we built in the previous tutorial—Creating a Custom Component in React Native. In that tutorial, we created a custom Quote component. In this tutorial, we will display an icon on top of the quote.

If you have not yet read the earlier tutorial, this is a good time to read it.

To use a 3rd-party library, we need to install it first. Since React Native is based on npm, we install the 3rd-party library like any other npm module.

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

If you use expo or create-react-native-app to create your apps, you don't have to link the library. Else you need to link the library with react-native link.

Once installed we can use the library by importing it into our code. This library has many font bundles in it. We are going to use FontAwesome. Search for the icon you need to use it.

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

That is it. Simple isn't it?

For reference, the full Quote.js is here:

import React, { Component } from 'react';

import {
  View,
  Text,

} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

export default class Quote extends Component {
  render() {
    return (
      <View>
        <Icon name={this.props.QuoteIcon} size={100} color="#900" />
        <Text>{this.props.QuoteText}</Text>
        <Text>{this.props.QuoteSource}</Text>
      </View>

    );
  }
}

This is App.js.

<View style={styles.container}>
<Quote
  QuoteText="Better a diamond with a flaw than a pebble without."
  QuoteSource="Confucius"
  QuoteIcon="diamond" />
</View>

This is part of Learn React Native series.

Want to learn React Native? Subscribe using the below form.


Like the post? Retweet it. Got comments? Reply.

Using 3rd Party Libraries in React Native by @jjude: https://t.co/tP1TsLJK8n

— Joseph Jude (@jjude) November 28, 2017
Share this on: Twitter / /

Comments

comments powered by Disqus