Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Building a Meditation App with React Native and Expo Router

via freeCodeCamp

Overview

Build a meditation app using Expo and React Native in this comprehensive tutorial. Learn to leverage TypeScript, React, NativeWind, and Expo to develop a mobile application from scratch. Follow along as you set up the development environment, add static assets, implement key screens including meditation and affirmation indexes, and integrate audio functionality. Master essential concepts such as using FlatList, implementing navigation with Expo Router, and managing state with React Context. Access the provided GitHub repository for reference and explore additional resources to further enhance your React Native skills.

Syllabus

⌨️ Simple Meditation App Expo React Native
⌨️ GitHub Repository Info
⌨️ Upcoming Courses
⌨️ Social Media and FitFuelPlanner
⌨️ Setup Local Development Environment
⌨️ Add static assets and define constant files
⌨️ Setup NativeWind
⌨️ Implement Initial Screen
⌨️ Splash Screen Image
⌨️ The useRouterHook
⌨️ Add AppGradient Component and Tabs directory
⌨️ The Meditation Index Screen
⌨️ Use FlatList on the Meditation Index Screen
⌨️ The Affirmations Index Screen
⌨️ The Affirmations Detail Screen
⌨️ The Meditation Detail Screen
⌨️ Meditation Audio/Song
⌨️ React Context and Modal Screen

Taught by

freeCodeCamp.org

Reviews

Start your review of Building a Meditation App with React Native and Expo Router

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.