React Native Expense Tracker App Series 10: Adding Expense Date

Introduction

In the previous part, we added local storage support using AsyncStorage.

Now our Expense Tracker app can save expenses locally.

That means:

Added expenses remain after refresh
Deleted expenses remain deleted after refresh
Empty list state is saved
Total amount restores correctly

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

Currently, when we add a new expense, the date is always saved as:

Today

Example:

date: 'Today'

This is not flexible.

In a real app, the user should be able to enter the expense date.

In this part, we will add an expense date input field.

The user will enter:

Expense name
Expense amount
Expense date

Then the app will save and display the date with the expense item.

What We Will Build

We will update the Expense Tracker app with:

Expense date input field
Date state using useState
Date validation
Saving date with expense item
Displaying custom…