React Native Expense Tracker App Series 13: Showing Expense Count by Category

Introduction

In the previous part, we added Filter by Category in the Expense Tracker app.

Now the user can tap:

All
Food
Travel
Shopping
General

and the app shows only expenses from the selected category.

In this part, we will improve the filter UI by showing expense count for each category.

Example:

All (4)
Food (2)
Travel (1)
Shopping (1)

This helps the user quickly understand how many expenses are available in each category.

What We Will Build

We will add:

Expense count on category buttons
Selected category expense count
Dynamic count update after add/delete
Singular/plural expense label
Better total card information

What We Will Learn

In this tutorial, we will learn:

Counting array items
Creating helper functions
Using filter() for count calculation
Showing dynamic text in UI
Updating UI automatically after state changes
Improving user experience with count labels

Final Output