Let’s strengthen our React Native skills by building this Fitness UI for a workout logger.

This is an Bonus lesson, part of the Fitness App module in the React Native Mastery Course.

If you are up for the challenge, and want to practice building React Native User Interfaces, let’s build this together.

The app

The application is a workout tracker. You can track a workout while training and then keep track of the past workouts.

We have 3 main screens:

Home Screen

Workout details

Workout Logger

Dark/Light mode

We will also implement dark/light mode:

Let’s get started 🌟

Create and setup the project

• [ ] Init a blank typescript expo app
• [ ] Open in VSCode and run the app
• [ ] Add typescript path aliases

"paths": {
  "@/*": ["./src/*"]
}

Data model

Let’s explore the data model that we will work with. Here is the database model that we will later build.

There are 3 main models in our app: