Awesome React Native Libraries

4 minutes, 32 seconds

As we make many React Native apps, it’s good to share what kind of libraries that we commonly used.

Essential Stacks

React Navigation

This is important to make RN app able to move from on screen to another with proper structure. Structure here are: Stack, Tab and Drawer. It’s highly customizable and quite powerful to deliver any possibilites navigation needed for your app. Not let the name fools you, ‘react-navigation’ is for React Native not ReactJS.

yarn add react-navigation

Read React Navigation Docs

Native Base

When we develop apps for RN, it’s not like native where we get standard UI for each platform, especially for sophisicated UI like Table View, which is has some detail state’s view, like when tapping a cell there is a certain behaviour that we want to achieve in order to make our apps look more like native, easier and faster.

Other than nice UI, it has bundled with Awesome Icon in the library. So you may use all the popular glyph icons as well.

The reprensation of the UI for certain components are actually different from iOS to Android as it will use the native component for each platform.

yarn add native-base && react-native link native-base

Read Native Base Docs

Networking

Axios

Axios is go to library to communicate with your back-end server to request RESTful API.

yarn add axios

GitHub Axios

Firebase

For all thing Firebase, required for integration with Firebase back-end service.

This library is the compact version from the react-native-firebase.

yarn add firebase

NPM Firebase

Misc Stuff

MomentJS

If you need any date calculation, this will come handy.

yarn add moment

Moment Docs

Lodash

Lodash is helper when you dealing with JavaScript and data from Firebase or JSON data.

yarn add lodash

Lodash Docs

Modal

Modal is the UI that will become and center to the user when it appears. All focus on the modal.

So this library is to make modal view more appealing with animation and presentation.

yarn add react-native-modal

GitHub react-native-modal

Redux, React-Redux, Redux-Persist & Redux-Thunk

Redux is a pretty important library when you deal with more complex app, that require data propagate to all required components.

As you know, RN is build with components, and sometime, components are scatered around and don’t have a tight connection to pass data around them easily, so that Redux come handy to cater this problem.

yarn add redux && yarn add react-redux && yarn add redux-persist && yarn add redux-thunk

Redux subject is hard to master. How about to look at simplified version of Redux. Usually you will find Redux being used with complicated folder structures.

Learn about simplified redux here.

We usually consolidate into Redux folder and name Action and Reducers together in a folder. Less mess. As coming from native developer, we have the luxury to manage the folder nicely especially on Xcode, but with React Native it became messed up when folders that have strong relation ‘reducers’ and ‘action’ at separated place.

How it’s used in the work will be discuss later.

Polishing Level

react-native-fast-image

Make the downloaded image cached into your phone. So make your app faster when it’s opening.

GitHub

react-native-offline

Make your app usable even there is no internet connection.

GitHub

Full List of Awesome Libraries

GitHub