Uploaded August 2025 | Updated September 2026, 3 weeks ago
Build a complete React Native app with Expo Router, Clerk, ElevenLabs, and Appwrite. Covering authentication, AI agents, animations, and databases.
🧪 Elevenlabs → try.elevenlabs.io/1oqysixpa29v
🔐 Clerk → go.clerk.com/pZYV6tb
🏎️ Appwrite → https://t.co/QT5J6j7yVZ
💻 Source Code → https://codewithbeto.dev/resources/numa
👨🏻💻 🌟 Be the mobile expert on your team 🌟 👨🏻💻
Learn mobile development with courses, templates, and full-stack codebases built to help you ship better apps:
- React Native Course → https://codewithbeto.dev/learn
- React with TypeScript Course → https://codewithbeto.dev/learnReact
- Git & GitHub Course → https://codewithbeto.dev/learnGit
youtu.be/HKJdqJIDtMs
For other ways to support my work, please consider:
- GitHub Sponsors: github.com/sponsors/betomoedano
- Become a Code with Beto channel member: youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join
⌚️ Timestamps ⌚️
00:00:00 – Intro / Live Demo
00:06:33 – Creating Project
00:07:49 – Resetting Project
00:09:19 – Running Project
00:10:19 – Implementing Authentication
00:11:42 – Clerk Expo UI Overview
00:13:36 – Setting Up Clerk Dashboard
00:15:03 – Enabling Native Application in Clerk
00:16:40 – Creating a Development Build
00:19:59 – Implementing Clerk Native UI
00:23:15 – Expo Router Authentication
00:26:23 – Adding Token Cache
00:26:45 – Installing Expo Secure Store
00:27:18 – Configuring Clerk Publishable Key
00:30:03 – Adding Clerk Wrapper Component
00:31:30 – Expo Router Protected Routes
00:36:47 – Implementing Auth Screens
00:40:32 – Testing Authentication Flow
00:45:25 – Styling Auth Screens
🎨 Animated Gradient with Skia
00:46:47 – Implementing Animated Gradient with Skia
00:47:48 – Installing React Native Skia
00:52:06 – Changing Gradient Size
00:56:20 – Animating Gradient in Y Axis
01:04:17 – Animated Gradient from A to B
01:06:52 – Animating Gradient Radius
01:16:30 – Adding Gradient Pulse Animation
01:23:00 – Testing Gradient Animation States
🤖 ElevenLabs Integration
01:26:55 – ElevenLabs Intro
01:28:12 – ElevenLabs Dashboard Overview
01:28:54 – Creating a New AI Agent
01:35:15 – Adding Agent Environment Variable
01:35:37 – Installing ElevenLabs Dependencies
01:36:34 – Adding ElevenLabs Provider
01:37:32 – Implementing Agent Conversation
01:38:15 – Adding WebRTC Plugins
01:39:28 – Generating App Icon with AI
01:42:26 – Creating Agent Session Screen
01:48:04 – Start Conversation Function
01:49:24 – End Conversation Function
01:50:18 – Starting an Agent Session
01:52:32 – Agent Dynamic Variables
01:53:44 – Adding Meditation Sessions List
02:00:33 – Using Route Params to Get Session
02:03:15 – Testing Agent with Dynamic Session Params
02:03:55 – Improving Session Screen UI
02:06:50 – Creating a Button Component
02:18:01 – Getting Conversation ID
02:18:30 – Integrating Client Tools (Brightness)
02:22:15 – Configuring Brightness Tool in ElevenLabs
02:27:42 – Adding Agent Server-Side Tools
02:31:47 – Creating Session Summary Screen
02:35:28 – Adding Server-Side ElevenLabs API Key
02:36:57 – Adding Conversation Types
02:37:52 – Creating Conversations API Route
02:44:00 – Deploying API Route to EAS Hosting
02:46:46 – Testing Summary Screen API
02:48:28 – Displaying Session Summary
02:51:16 – Parallax Scroll View Component
03:09:03 – Adding Explore Session Section
🗄️ Appwrite Integration
03:14:30 – Appwrite Overview
03:15:48 – Creating a New Appwrite Project
03:16:18 – Appwrite Project ID Env Variable
03:17:00 – Creating Database
03:17:40 – Appwrite New Database Terminology
03:18:46 – Creating a Sessions Table
03:20:32 – Database Permissions
03:22:25 – Installing Appwrite Dependencies
03:23:25 – Appwrite Configuration File
03:26:35 – Adding Types for Sessions Data
03:29:01 – Fetching User Sessions
03:32:34 – Saving User Sessions to Database
03:37:01 – Adding a Refresh Sessions Button
03:38:45 – Render Users Session History
03:43:13 – Minor UI Improvements
03:43:38 – Displaying User Card
🔚 Wrap Up
03:45:07 – Recap
⭐️ If you want to learn more about me, check this links:
Code With Beto → https://codewithbeto.dev
🦋 → https://bsky.app/profile/codewithbeto.dev
X → https://x.com/betomoedano
Github → github.com/betomoedano
Linkedin → linkedin.com/in/betomoedano
Discord → discord.com/invite/dbYfWFw862
Medium → medium.com/@betomoedano01
Figma → figma.com/@codewithbeto
#reactnative #ai #mobileappdevelopment
Build a complete React Native app with Expo Router, Clerk, ElevenLabs, and Appwrite. Covering authentication, AI agents, animations, and databases.
🧪 Elevenlabs → try.elevenlabs.io/1oqysixpa29v
🔐 Clerk → go.clerk.com/pZYV6tb
🏎️ Appwrite → https://t.co/QT5J6j7yVZ
💻 Source Code → https://codewithbeto.dev/resources/numa
👨🏻💻 🌟 Be the mobile expert on your team 🌟 👨🏻💻
Learn mobile development with courses, templates, and full-stack codebases built to help you ship better apps:
- React Native Course → https://codewithbeto.dev/learn
- React with TypeScript Course → https://codewithbeto.dev/learnReact
- Git & GitHub Course → https://codewithbeto.dev/learnGit
youtu.be/HKJdqJIDtMs
For other ways to support my work, please consider:
- GitHub Sponsors: github.com/sponsors/betomoedano
- Become a Code with Beto channel member: youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join
⌚️ Timestamps ⌚️
00:00:00 – Intro / Live Demo
00:06:33 – Creating Project
00:07:49 – Resetting Project
00:09:19 – Running Project
00:10:19 – Implementing Authentication
00:11:42 – Clerk Expo UI Overview
00:13:36 – Setting Up Clerk Dashboard
00:15:03 – Enabling Native Application in Clerk
00:16:40 – Creating a Development Build
00:19:59 – Implementing Clerk Native UI
00:23:15 – Expo Router Authentication
00:26:23 – Adding Token Cache
00:26:45 – Installing Expo Secure Store
00:27:18 – Configuring Clerk Publishable Key
00:30:03 – Adding Clerk Wrapper Component
00:31:30 – Expo Router Protected Routes
00:36:47 – Implementing Auth Screens
00:40:32 – Testing Authentication Flow
00:45:25 – Styling Auth Screens
🎨 Animated Gradient with Skia
00:46:47 – Implementing Animated Gradient with Skia
00:47:48 – Installing React Native Skia
00:52:06 – Changing Gradient Size
00:56:20 – Animating Gradient in Y Axis
01:04:17 – Animated Gradient from A to B
01:06:52 – Animating Gradient Radius
01:16:30 – Adding Gradient Pulse Animation
01:23:00 – Testing Gradient Animation States
🤖 ElevenLabs Integration
01:26:55 – ElevenLabs Intro
01:28:12 – ElevenLabs Dashboard Overview
01:28:54 – Creating a New AI Agent
01:35:15 – Adding Agent Environment Variable
01:35:37 – Installing ElevenLabs Dependencies
01:36:34 – Adding ElevenLabs Provider
01:37:32 – Implementing Agent Conversation
01:38:15 – Adding WebRTC Plugins
01:39:28 – Generating App Icon with AI
01:42:26 – Creating Agent Session Screen
01:48:04 – Start Conversation Function
01:49:24 – End Conversation Function
01:50:18 – Starting an Agent Session
01:52:32 – Agent Dynamic Variables
01:53:44 – Adding Meditation Sessions List
02:00:33 – Using Route Params to Get Session
02:03:15 – Testing Agent with Dynamic Session Params
02:03:55 – Improving Session Screen UI
02:06:50 – Creating a Button Component
02:18:01 – Getting Conversation ID
02:18:30 – Integrating Client Tools (Brightness)
02:22:15 – Configuring Brightness Tool in ElevenLabs
02:27:42 – Adding Agent Server-Side Tools
02:31:47 – Creating Session Summary Screen
02:35:28 – Adding Server-Side ElevenLabs API Key
02:36:57 – Adding Conversation Types
02:37:52 – Creating Conversations API Route
02:44:00 – Deploying API Route to EAS Hosting
02:46:46 – Testing Summary Screen API
02:48:28 – Displaying Session Summary
02:51:16 – Parallax Scroll View Component
03:09:03 – Adding Explore Session Section
🗄️ Appwrite Integration
03:14:30 – Appwrite Overview
03:15:48 – Creating a New Appwrite Project
03:16:18 – Appwrite Project ID Env Variable
03:17:00 – Creating Database
03:17:40 – Appwrite New Database Terminology
03:18:46 – Creating a Sessions Table
03:20:32 – Database Permissions
03:22:25 – Installing Appwrite Dependencies
03:23:25 – Appwrite Configuration File
03:26:35 – Adding Types for Sessions Data
03:29:01 – Fetching User Sessions
03:32:34 – Saving User Sessions to Database
03:37:01 – Adding a Refresh Sessions Button
03:38:45 – Render Users Session History
03:43:13 – Minor UI Improvements
03:43:38 – Displaying User Card
🔚 Wrap Up
03:45:07 – Recap
⭐️ If you want to learn more about me, check this links:
Code With Beto → https://codewithbeto.dev
🦋 → https://bsky.app/profile/codewithbeto.dev
X → https://x.com/betomoedano
Github → github.com/betomoedano
Linkedin → linkedin.com/in/betomoedano
Discord → discord.com/invite/dbYfWFw862
Medium → medium.com/@betomoedano01
Figma → figma.com/@codewithbeto
#reactnative #ai #mobileappdevelopment
