Feb 16
Loading video player...
Master React Native alongside me https://cwb.sh/rn Learn how to build a complete real-time chat application from scratch using React Native, Expo SDK 55, and Instant as the backend. We cover authentication with magic codes, guest sign-in, real-time messaging, database schema design, and keyboard handling - all coded by hand without AI. - Instant Docs: https://www.instantdb.com/docs - React Native course & Inkigo source code: https://codewithbeto.dev - Source Code: https://github.com/betomoedano/instant-realtime-chat.git 📬 Newsletter: https://cwb.sh/newsletter?r=yt 💬 Join the Discord community: https://cwb.sh/discord For other ways to support my work, please consider: - GitHub Sponsors: https://github.com/sponsors/betomoedano - Become a Code with Beto channel member: https://cwb.sh/join 🐦 Follow Beto on X: https://x.com/betomoedano 💼 LinkedIn: https://www.linkedin.com/in/betomoedano 💻 GitHub: https://github.com/betomoedano 📸 Instagram: https://www.instagram.com/codewithbeto 🎵 TikTok: https://www.tiktok.com/@codewithbeto 🧵 Threads: https://www.threads.com/@codewithbeto 🦋 Bluesky: https://bsky.app/profile/codewithbeto.dev ⌚️ Timestamps ⌚️ 00:00 Intro 00:26 What is Instant? 00:45 Creating a new Expo project 03:52 Expo SDK 55 native tabs overview 04:54 Installing Instant in the project 07:03 Authenticating with Instant CLI 07:55 Instant sandbox & dashboard 09:47 Installing instant-react-native 12:00 Resetting & simplifying the project 12:50 Real-time functionality demo 14:00 Environment variables setup 16:13 Creating a new Instant app 18:14 Schema & permissions setup 22:00 Default schema overview 23:08 Implementing authentication 24:54 Magic code email auth 27:00 Creating auth screen component 31:00 Building email & code step components 38:54 Auth screen styling 44:00 Testing auth on iOS 46:15 Email step & code step flow 55:07 Auth persistence & sign out 57:42 Creating the home screen 01:04:15 Auth persistence confirmation 01:05:01 Guest authentication 01:10:31 Starting conversations - schema design 01:12:04 Database schema with channels & messages 01:16:03 Creating data in Instant Explorer 01:19:04 Building the channels list UI 01:26:00 Dynamic routes with Expo Router 01:32:00 Querying messages by channel 01:40:01 Message container styling 01:49:03 Real-time messaging demo 01:51:04 Keyboard handling setup 02:00:00 Input & send button UI 02:11:03 Submitting messages 02:27:00 Author linking & profiles 02:38:00 Wrap-up #Coding #ReactNative #InstantDB