React Native Expense Tracker App Series 8: Showing Empty List Message

Introduction

In the previous part, we added delete functionality to the Expense Tracker app.

Now the user can delete any expense item from the list.

When an expense is deleted:

The item is removed from the list
The total amount updates automatically

But there is one small issue.

If the user deletes all expenses, the screen becomes empty under Recent Expenses.

That does not look good.

In this part, we will show a proper empty list message when there are no expenses.

Example:

No expenses yet
Add your first expense using the form above.

This will improve the user experience.

What We Will Build

We will update the Expense Tracker app with:

Empty list message
Conditional rendering
Better UI when expenses list is empty
Add expense after empty list
Total amount showing ₹0 when list is empty

What We Will Learn

In this part, we will learn:

Checking array length
Conditional rendering
Showing fallback UI…