Build an AI-Powered Meditation App with React Native | Code with Beto

Learn how to build a full-featured AI-powered meditation app using React Native. You'll learn integrating authentication with Clerk (Google and email sign-in), managing protected routes with Expo Router, storing user sessions and history with Appwrite, and powering conversational AI with 11 Labs. The UI is polished with React Native Reanimated and Skia animations.

If you want to create a mindfulness app that feels modern and production-ready, this video breaks down the key building blocks step by step. It’s perfect for React Native developers looking to combine authentication, AI, and advanced animations in one app.

What's inside

Introduction and overview of the AI-powered meditation app
Setting up a new React Native project with Expo and Bun
Integrating Clerk for authentication with Google and email
Using Expo Router protected routes for clean auth flow
Storing user sessions and history with Appwrite database
Powering conversational AI and device control with 11 Labs
Creating a polished UI with React Native Reanimated and Skia
Running and testing the app on Expo and simulator

Introduction and overview of the AI-powered meditation app

I open by explaining the challenges of building AI apps: connecting voice, saving user sessions, and letting the AI agent interact with the device. The demo app features a home screen with a featured meditation session, recent sessions, and an account screen with Google and email sign-in powered by Clerk.

The AI agent can set device brightness, fetch quotes, and respond to voice commands in multiple languages. Sessions include a transcript and can be saved and revisited later. The app uses Expo Router’s new protected routes to separate public and private screens, keeping the authentication flow clean.

Setting up a new React Native project with Expo and Bun

The first step is creating a new React Native app using Bun and Expo. The command used is:

The project is named "numa" for its mindfulness significance. After creation, the default template is reset to a minimal layout with a simple index screen for clarity. I show opening the project in VS Code and running the app on an iPhone simulator using Expo.

The presenter notes that while Expo Go works for now, a development build will be needed later for native dependencies like 11 Labs integration.

Integrating Clerk for authentication with Google and email

Authentication is handled by Clerk, which provides email and Google sign-in, password resets, and confirmation flows out of the box. I explain that Clerk’s React Native support is less mature than its Next.js web components, but Brian from Clerk has created a React Native UI component library called Clerk Expo UI.

This library simplifies integrating Clerk’s auth flows in Expo and React Native apps. I show signing in with Google and email, signing out, and resetting passwords using these components.

Using Expo Router protected routes for clean auth flow

Expo Router version 5 introduces protected routes, which group public and private screens based on authentication state. The app passes whether the user is authenticated to the router, which then handles redirecting users to sign-in or private areas.

This pattern keeps the navigation and authentication logic clean and separated, improving maintainability and user experience.

Storing user sessions and history with Appwrite database

Appwrite is used as a flexible backend database to store user sessions and meditation history. This ensures that users’ data persists across devices and sessions.

I demonstrate saving session transcripts and metadata to Appwrite, then fetching and displaying recent sessions on the home screen. This persistence is key for a personalized mindfulness experience.

Powering conversational AI and device control with 11 Labs

11 Labs provides both client-side and server-side tools to power the conversational AI agent. The agent can control device features like screen brightness and fetch external data such as quotes.

I show voice interactions where the AI sets brightness, fetches new quotes, switches languages, and ends sessions. This integration makes the meditation app interactive and adaptive to user commands.

Creating a polished UI with React Native Reanimated and Skia

The UI includes advanced animations using React Native Reanimated and Skia. The home screen features a featured session image with subtle zoom and stretch effects on scroll, creating an immersive feel.

An animated radial gradient grows and pulses when the AI agent is speaking, providing real-time visual feedback. These touches make the app feel polished, modern, and alive.

Running and testing the app on Expo and simulator

I show running the app on an iPhone 16 Pro simulator using Expo. Hot reloading works smoothly for rapid development.

The presenter notes that a development build will be needed later to support native modules required by 11 Labs and other dependencies, as Expo Go does not support custom native APIs.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro membership

Access premium resources and tutorials to build better React Native apps faster.

Let's connect!