Chapter 3. Our Second Project - The Budgeting App

Staying within a monthly budget is something that I've found difficult to do in the past. For our second project, we will build an app that keeps track of our budget by letting us set a goal for how much we'd like to spend in a month, and then lets us enter expenses into the application and categorize them under simple labels. At any point, we can go and look at how we're doing for the month and look at our previous months' results.

In this chapter, we will cover the following topics:

• Planning our second app, Expenses
• Installing a popular vector icon library for React Native
• Building a series of helper methods that will be used throughout our app
• Creating a modal that lets us enter our expenses
• Rendering a list for the current month, showing the month's progress

Getting started

Like always, let's begin by initializing a new React Native project using the following statement in our command line:

react-native init Expenses

While the React Native CLI is doing its work in scaffolding our project, we should plan out the functionality of the app.

App planning

Once this app is complete, we would like for it to function in the following ways:

• Upon launching the app, if a budget for the month has not yet been set, it should ask the user to input their monthly goal and save it in AsyncStorage.
• Once a budget for the month has been set, the user should be shown a screen that contains a button to add their expenses for the month.
• Upon tapping on that button, the user should be shown a modal that allows them to input details for their expenses: the name, amount, date the purchase was made on, and an icon to categorize the item. The modal should allow the user to either cancel or save the entry that they make.
• If the expense is saved, it should then be rendered in a list...

Folder structure

The following structure includes components that we will wind up building in this very chapter:

|Expenses 
|__app 
|____components 
|______AddExpenses 
|______AddExpensesModal 
|______CurrentMonthExpenses 
|______EnterBudget 
|______ExpandableCell 
|______ExpenseRow 
|____utils 
|______dateMethods.js 
|______storageMethods.js 
|____App.js 
|____styles.js 
|__ios 
|__index.ios.js 

Utilities

The utils folder stores helper methods that we will be using in our application. The dateMethods deals with the different methods that we will use to get different parts of the date, while storageMethods handles access to AsyncStorage.

Our first bullet point from app planning says that upon launching the app, if a budget for this month has not yet been set, it should ask the user to input their monthly goal and save it into AsyncStorage.

Based on the preceding intent, we want to do the following things:

• Grab the current month and year
• Retrieve the object storing our expenses in AsyncStorage and...

The EnterBudget component

The component to enter a budget should do the following things:

• Prompt the user to enter their budget for the month with a numerical input
• Include a button that lets them save the budget. When saved, we will do the following things:
  • Have the parent App.js component use saveMonthlyBudget, created in our storageMethods file, to save the entered budget
  • Update the parent App.js component to reflect the entered budget
  • Pop out of the EnterBudget component and go back to the App.js component

We should also modify the App.js component so that it does the following things:

• Pushes the EnterBudget component to the navigator in the event that a budget has not been set. This should replace the current call to alert the user that they have not yet set a budget. This component should not contain a back button so that the user is required to enter a budget for the month.
• Passes the name of the current month in string form to the EnterBudget component.
• Stores the current month and year in...

The AddExpenses container and modal

When planning this app, I wrote that once a budget for the month has been set, the user should be shown a screen that contains a button to add their expenses for the month.

The button's behavior was also detailed, and we said that upon tapping on that button, the user should be shown a modal that allows them to input details for their expenses--the name, amount, date the purchase was made on, and an icon to categorize the item. The modal should allow the user to either cancel or save the entry they make.

We can create one component to add expenses that will contain both the Button and Modal, with the Modal defaulting to a hidden state unless activated by the Button.

Let's start by creating a component, titled AddExpenses, which will start off by doing the following things:

• Accepting the month and year as props
• Rendering a Button that, when pressed, will alert the user for now

Additionally, we should render the AddExpenses component within App.js:

// Expenses...

Displaying the current month's expenses

The next feature we wrote about earlier in this chapter was that if the expense is saved, it should then be rendered in a list on the main screen that contains the button to add further expenses.

In this section, we will create that list. We should create a component called CurrentMonthExpenses and make modifications to the existing files to support it.

You should add a new function to storageMethods that accepts a month and year, returning the budget, list of expenses, and the amount spent for that month and year.

The CurrentMonthExpenses component should do the following things:

• Render a header that shows the current month's name and budget.
• Display a ListView of the month's expenses, retrieved from AsyncStorage, with some styling and formatting. At the very least, it should include the description of the expense as well as the dollar amount.
  • The ListView being rendered should be its own component so that we can reuse it in the next chapter for the prior...

Summary

In this chapter, we started building our budgeting app. We installed a popular vector icon library, discovered how to link that library to our project in Xcode, and then wrote a basic version of our app.

This included a basic helper library that managed date methods and another to manage storage.

In the app, we created a prompt for the user to enter their budget for the month and ensured that it collected this data before letting them proceed to add in expenses. Then, we used a modal to show and hide the fields for a user to add a new expense into the app and updated the ListView component to reflect the newly added expense.

The next chapter will get more advanced. We will finally put that vector icon library to good use by letting the user categorize their expenses by icon, and then let them look at the past months' data by creating a second section of our app, which is controlled by a tab bar. Additionally, we will create a progress view to track the total amount already spent by...