Tutorial React Native | Minimalistic To Do App | Design

Learn how to create a minimalistic and elegant To Do app UI using React Native. It is perfect for developers who want to learn how to build clean interfaces with basic navigation and interactive elements.

You will see how to set up the project with Expo, organize data and components, and implement a FlatList to display tasks separated by today and tomorrow. I also previews future steps like task logic, notifications, and publishing.

What's inside

• Introduction and project setup with Expo
• Creating and exporting static To Do data
• Building a To Do list component with FlatList
• Handling item rendering and keys in FlatList
• Designing UI states for tasks (completed, pending)
• Separating tasks by today and tomorrow
• Planning future features: logic, notifications, publishing
• Using a Figma design from Eco Estudios for UI inspiration

Introduction and project setup with Expo

I start by introducing the goal: a beautiful minimal To Do app with smooth interactions. I run expo init to create a new React Native project using the blank template and name it "minimal YouTube." After dependencies install, I open the project in Visual Studio Code and start the Expo server with expo start.

I demonstrate opening the iOS simulator by pressing "y" in the terminal, showing the initial blank app ready for development. This setup is essential for quickly iterating on the UI and testing on real devices or emulators.

Creating and exporting static To Do data

To work with tasks, I create a Data folder and add a todos.js file. This file exports an array of To Do objects manually written with properties like id, text (task title), isCompleted (boolean), today (boolean for today or tomorrow), and hour.

This static data simulates what real tasks might look like and helps build the UI before adding dynamic logic. Exporting the data as a module allows easy import into components.

Building a To Do list component with FlatList

Next, I create a components folder and inside it a TodoList.js component. I import React, the static To Do data, and React Native's FlatList component.

The TodoList component receives the data and renders it using FlatList, which efficiently handles large lists by rendering only visible items. This approach is standard in React Native for lists.

Handling item rendering and keys in FlatList

Initially, the list does not show anything because the renderItem prop is missing. I fixes this by adding a renderItem function that receives each task item and returns how it should be displayed.

I also set the keyExtractor prop to use each item's id converted to a string. This key is crucial for React Native to track list items and optimize rendering.

With these fixes, the list properly displays all tasks from the static data.

Designing UI states for tasks (completed, pending)

I explain that tasks have two main states: completed and pending. For today’s tasks, a checkbox is shown as an empty circle if pending, and changes to a checked icon with a line-through text style when completed.

Tomorrow’s tasks have a different style with a dot instead of a checkbox and are not interactive until the day arrives. This visual distinction helps users quickly identify task status and timing.

Separating tasks by today and tomorrow

I plans to separate tasks into two groups: those for today and those for tomorrow. Today’s tasks are interactive and can be marked done, while tomorrow’s tasks are read-only and visually distinct.

This separation improves usability by focusing attention on immediate tasks and deferring future ones.

Planning future features: logic, notifications, publishing

I outlines a multi-part tutorial series. The next videos will add logic to mark tasks completed, save state locally, and implement notifications with push alerts.

Finally, I plans to show how to publish the app to the App Store, walking through the entire process so viewers can deploy their own versions.

Using a Figma design from Eco Estudios for UI inspiration

The UI design comes from Eco Estudios, a digital studio specializing in UI/UX and development. I credits them for the beautiful Figma design used as a reference.

I share that the design and all resources will be available for download, allowing viewers to follow along and customize the app’s look.

Resources

YouTubeTutorial React Native | Minimalistic To Do App | Design

Follow along building a minimal To Do app UI with React Native and Expo.

CourseReact Native course

Learn React Native fundamentals and ship real apps with lifetime access.