Build a Native View with Expo Modules | iOS 26 Liquid Glass Effect in React Native
Learn how to build a custom native view using the Expo Modules API. In this hands-on tutorial, we create a Liquid Glass view that leverages the new UIGlassEffect API introduced in iOS 26 🔒 This video is for members only. Want to unlock this lesson and get lifetime access to the full course? 👉 https://codewithbeto.dev 📬 Newsletter: https://cwb.sh/newsletter?r=yt 💬 Join the Discord community: https://cwb.sh/discord 🐦 Follow Beto on X: https://x.com/betomoedano 💻 GitHub: https://cwb.sh/gh 💼 LinkedIn: https://cwb.sh/in ⭐ Become a Channel Member: https://cwb.sh/join 00:00 - Introduction 00:51 - Setting Up the Project and Screen 01:52 - Creating the Liquid Glass Module 02:44 - Cleaning Up Boilerplate (iOS Only Module) 03:39 - Opening in Xcode and Module Structure 04:18 - Understanding the Default WebView Template 05:27 - Using the Native View in React Native 06:04 - Styling Native Views with Yoga (Flexbox) 07:47 - How Yoga Works with UIKit 08:53 - Seb Vidal's Blog: UIGlassEffect API 10:00 - Implementing UIVisualEffect and UIGlassEffect 11:08 - Adding iOS Version Check (@available) 11:38 - Creating Blur Effect Fallback for iOS 18 12:40 - Auto Resizing and Adding Subviews 13:50 - Testing the Liquid Glass Effect 14:58 - Making the View Interactive 15:24 - Adding Tint Color to Glass Effect 16:00 - Corner Configuration (Capsule vs Radius) 17:03 - Passing Properties from JavaScript to Native 18:04 - Creating the setRadius Function in Swift 19:35 - Updating TypeScript Types 20:44 - Live Reloading with Native Views 21:53 - Adding Children to Native Views 23:01 - Overriding mountChildComponent Functions 24:00 - Testing on iOS 18 (Blur Fallback) 25:51 - Implementing Radius Fallback for iOS 18 26:06 - Testing on Android (Handling the Crash) 27:02 - Creating Android Fallback with Platform Extensions 28:00 - Final Result and Wrap Up #ReactNative #ExpoModules #MobileDevelopment
Download
0 formatsNo download links available.