Useful React Native Packages

Intro

If you have read the title of this blog, you've probably stopped by because you want to learn about some useful React Native packages, so that you can use them for your next React Native project. So let me just get started, if you are new to React Native, feel free to look up my previous blog about how to get started with React Native, or just look at it to get a refresher if needed, though it is kinda a rough read.

Overview

To get started, I will just list out the packages I will be going over for you right here.

• React Native Animatable
• React Native Vector Icons
• React Native Snap Carousel
• React Navigation
• Axios

Now most of these packages are stylistic, or have to deal with how your application looks, but the rest deal with useful functionality that you might end up needing, if you plan on using React Native to create a full robust application. I don't plan to write extensively about each of these packages, mostly because, I'm not the best writer, but also because these packages are pretty well documented and they have a ton of functionality so going through them in complete depth would end up having me write a novel.

Also a quick disclaimer, I will be showing some code snippets on here that will be using npm install, but know that you can use npm/yarn/expo interchangeably for most of these installations, probably.

React Native Animatable

First off is React Native Animatable, and as the name suggests, this package helps you add animations to elements contained in mobile components. Now you can find more information about this package here, but I will try and explain how to use this package in your project. To add this package to your app, you will need to use either of these commands in your terminal.

npm install react-native-animatable --save
yarn add react-native-animatable
//If this is an expo application
expo install react-native-animatable

Then in order to use this package, you need to import this package in each of the components that you intend to use the animations like so.

import * as Animatable from 'react-native-animatable';

Then to use it on a component you are importing from react you can implement the animatable like so.

//There are various props you can add to the Animatable tag you should look on the doc for more customizations 
<Animatable.Text 
 //Some type of styling to the text
 style={{}}
 //The type of animation you want the text to have
 animation="jello"
 //A delay, if you want your animation to be have a delayed activation, not required
 delay={1500}
>
 Hello World
</Animatable.Text>

React Native Vector Icons

Next is React Native Vector Icons, this package helps you add various icons to mobile components. Now you can find more information about this package here, this is how to implement this package to your app, you will need to use either of these commands in your terminal.

npm install react-native-vector-icons --save
yarn add react-native-vector-icons
//If this is an expo application
expo install react-native-vector-icons

Then in order to use this package, you need to import this package in each of the components that you intend to use the icons like so.

//The FontAwesome section, is and should be replaced, with the type of icons you would like to use, the list of compatible types are on link above
import Icon from 'react-native-vector-icons/FontAwesome';

Then to use it on a component you are importing from react you can implement the Icons like so.

//There are various props you can add to the Animatable tag you should look on the doc for more customizations 
<Icon
//The name is the name of the icon you want to use
name="user-o"
//Color and size are pretty self explanatory
color="#05375a"
size={25}
/>

React Native Snap Carousel

Next is React Native Snap Carousel, this package helps you add a sliding modal like this
to mobile components. Now you can find more information about this package here, this is how to implement this package to your app, you will need to use either of these commands in your terminal.

npm install react-native-snap-carousel --save
yarn add react-native-snap-carousel
//If this is an expo application
expo install react-native-snap-carousel

Then in order to use this package, you need to import this package in each of the components that you intend to use this carousel like so.

import Carousel from 'react-native-snap-carousel';

Since implementation for the carousel is a bit more complex, I wont show how to implement it here, but if you'd like a blog about that, just let me know in the comments below. But a simple way to know is to look at their docs or this like here for example code. Also on their github link itself.

React Navigation

First off is React Navigation, and as the name suggests, this package helps you add navigation or screen routing to your mobile app. React Navigation holds a similar concept to React Router, but for mobile apps. Now you can find more information about this package here, but I will try and explain how to use this package in your project. To add this package to your app, you will need to use a ton of these commands in your terminal.

npm install @react-navigation/native --save
yarn add @react-navigation/native
//If this is an expo application
expo install @react-navigation/native
//You will also need these commands these can be run with npm/expo/yarn
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

The implementation of React Navigation is also extremely dense and will also need a new blog post, maybe on my next one where I also explain snap carousel.

Axios

Next is Axios, this package helps you make http requests from node.js, it supports the Promise API. Now you can find more information about this package here, this is how to implement this package to your app, you will need to use either of these commands in your terminal.

npm install axios
yarn add axios
//If this is an expo application
expo install axios

Then in order to use this package, you need to import this package in each of the components that you intend to use the icons like so.

import axios from 'axios'

Then you should look at the various ways to implement this into your code on the github link but heres an example

// this axios will be referring to the axios in your import above
axios.get('Your URL')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Conclusion

There are loads of other packages that I would like to show off, but I there are way too many to explain with just one blog, but in the future maybe I will be able to write about some more. But at least coming in the next blog, there will be some more explanation about snap carousel, and react navigation at least.