NewCode with Beto MCP

Tutorial React Native | Minimalistic To Do App | Design

Beto, August 5, 2023 · 4,391 views

Good design is a skill you can practice, and a to-do app is the perfect canvas. I take a beautiful Figma design from Eco Estudios and turn it into a clean, minimal React Native UI, piece by piece in the video.

This is the first part of a series that ends with a published app, so the UI you build here is the real foundation.

What's inside

  • Project setup with Expo and the blank template
  • Static task data shaped like the real thing: id, text, completed, hour
  • FlatList with renderItem and keyExtractor done right
  • Distinct visual states for completed and pending tasks
  • Today's tasks are interactive, tomorrow's are read-only by design
  • Where the series goes next: logic, notifications, publishing

Resources

CourseReact Native course

Let's connect!

Had a win? Get featured on Code with Beto.Share your story