Design and UI

Through this succint tutorial, we will go through the design and development of a small expense manager in React Native. This app will help a user save and tag expenses on a remote server using a REST API. It will need to store data locally when no Internet connection is available and sync it when a connection is detected.

The following is not intended to be a full tutorial, but rather a compilation of notes and troubleshooting tips.

UI Design

The app will have 3 main screens:

• SplashScreen
• MainScreen containing a list of all the expenses
• AddExpenseScreen where the user can input the amount, category of the expense

Setup Environment

For this app, I am going to use React Native without Expo. You can see why not to use Expo here

Set ANDROID_HOME variable

You will need to make the ANDROID_HOME variable available. You can do this by setting it in the end of ~/.bashrc or ~/.bash_profile files:

Install dependencies using yarn

If you don’t have yarn installed, head to this page. I do not recommend using npm commands alongside yarn’s.

Now use the cli to scaffold the app skeleton:

This will generate the following structure:

Run the app

Now test everything by running:

You will need to run an emulator or plugin a device beforehand.

App Architecture

# Requirement 1: Persistence

https://github.com/rt2zz/redux-persist

# Requirement 2: Offline usage

https://github.com/redux-offline/redux-offline

---

Create the UI

First, we are going to create the three screens with dummy data.

Create a folder called components at the root of the app’s folder and under components/screens create three files: SplashScreen.js, MainScreen.js and AddExpenseScreen

In order to navigate between all different screens, I am going to use React Native Navigation.

Install it:

Along with React Native Navigation, we will be using React Native Redux which will offer us the possibility to manage an app wide store state of the app. Install React Native Redux:

redux-logger is quite handy to see the content of the store state

Setup Navigation

Create a new file name Navigator.js in a Navigation folder:

Setup the reducer

Add a new file caller Reducer.js at the app’s root folder:

We will handle persisting the store state later. Now, import the newly created reducer in the App.js file:

Create SplashScreen

The Splash Screen contains a simple text and no significant code. Here is the result:

Now add the logic to transition from SplashScreen to the MainScreen. We will just use a timeout. Add this to the SplashScreen component:

Create MainScreen

The main screen is comprised of 3 components:

• Header
• AddExpense Button
• List of all Expenses

We are going to use the components from React Native Elements. Add the dependencies:

Checkout this excellent tutorial on how to use flex for designing the UI: https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c

Create AddExpenseScreen

This screen has the following sections:

• A header with two buttons
• An input text for the expense amount
• A list to select the expense category
• A date picker
• A text input for expense comment

Add the following dependencies:

react-native-sectioned-multi-select is a handy select component which we will use to let the user see a predefined categories list. This list is the following:

The selector is very easy to use:

Similarly the date picker is used like this:

The screen will look like this. It is a little bit different from the first design but I have found this card based layout a little bit easier to use.

Now that the visual components are done, head to part 2 of this tutorial to see how we fetch data from the API.