Improving React Native Skills: Building a Meditation App with Expo

Course Overview

• Instructor: Steven Garcia
• Course Focus: Building a simple meditation app using:
  • TypeScript
  • React Native
  • Wind (Tailwind CSS for React Native)
  • Expo

App Features

1. Splash Screen: Displays an icon before loading the main app.
2. Home Screen: Contains a "Get Started" button that leads to different meditation previews.
3. Meditation Timer:
   • Previews show durations (e.g., 10 seconds, adjustable).
   • Modal for adjusting durations (e.g., 5 minutes).
   • Countdown timer with background sound.
4. Positive Affirmations Screen:
   • Displays different categories in a horizontal scroll view.
   • Positive affirmations available for selection.
5. Linear Gradient Backgrounds: Enhances visual aesthetics using gradients.

Development Setup

GitHub Repository

• Check out the associated GitHub repo for instructions on:
  • Cloning the repository
  • Installing project dependencies
  • Downloading assets (images, fonts, audio files).

Development Tools

• Visual Studio Code:
  • Use extensions like Prettier, ES7+ React/Redux snippets, Tailwind CSS IntelliSense.
• Expo and Simulators:
  • For iOS: Xcode for iOS simulator.
  • For Android: Android Studio for Android emulator.

Starting the Project

1. Create New Expo App:
   • Command: npx create-expo-app <project-name>
2. Project Structure:
   • App directory for source code.
   • Assets directory for images and other static files.
   • Constants directory for shared data (e.g., images, audio).
3. Run the App:
   • Command: npx expo start --clear

Course Content

Designing the Meditation App

• Home Screen Layout:
  • Add layout for welcome text and button using flex properties for centering.
• Implementing Navigation:
  • Use Expo router for navigation between screens.
  • Create a tabs layout for switching between meditation and affirmations screens.

Building the Meditation Timer

1. Countdown Logic:
   • Use useState to track time remaining.
   • Use setInterval to update the timer.
   • Reset timer when completed.
2. Playing Meditation Sounds:
   • Integrate audio playback with expo-av library for background meditation sounds.
   • Manage audio state (playing/paused).

Affirmation Screen Implementation

1. Display Affirmations:
   • Create a layout for affirmations similar to the meditation previews.
   • Navigation to individual affirmation details.

Adjust Duration Modal

1. Create Modal:
   • Implement modal for selecting meditation duration.
   • Use context to share duration state between components.

Final Touches

• Improving User Experience:
  • Make start/stop meditation button dynamic based on timer state.
  • Ensure audio stops when navigating back to prevent sound overlap.
• Testing and Debugging:
  • Test app on physical devices and simulators for debugging.

Additional Resources

• Support Steven Garcia by following him on YouTube and Instagram.
• Explore more courses for foundational knowledge in web development.
• Check out the FitFuel Planner app for health and fitness tracking.