As we make many React Native apps, it’s good to share what kind of libraries that we commonly used.
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
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
Axios is go to library to communicate with your back-end server to request RESTful API.
yarn add axios
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
If you need any date calculation, this will come handy.
yarn add moment
Lodash is helper when you dealing with JavaScript and data from Firebase or JSON data.
yarn add lodash
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
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.
Make the downloaded image cached into your phone. So make your app faster when it’s opening.
Make your app usable even there is no internet connection.