React Native Expense Tracker App Series 11: Adding Expense Categories

Introduction

In the previous part, we added expense date support to the Expense Tracker app.

Now the user can enter:

Expense name
Expense amount
Expense date

The app saves the date and displays it in the expense list.

Now we will improve the app by adding one more useful field:

Expense category

In a real expense tracker app, expenses are usually grouped by category.

Example:

Food
Travel
Shopping
Bills
Other

In this part, we will add a category input field.

The user will enter:

Expense name
Expense amount
Expense date
Expense category

Then the app will save and display the category with each expense item.

What We Will Build

We will update the Expense Tracker app with:

Category input field
Category state using useState
Category validation
Saving category with expense item
Displaying category in expense list
Persisting category using AsyncStorage

What We Will Learn