Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Blur Bottom Sheet using React Navigation - React Native Expo Tutorial

Code with Beto via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to build a visually appealing blur bottom sheet component using React Navigation and React Native Expo in this comprehensive 37-minute tutorial. Start by cloning the Budget Buddy app and setting up your development environment, then install and configure Expo Blur to create the blur effect. Explore the project structure and understand the implementation approach before diving into creating the bottom sheet screen from scratch. Master the process of modifying sheet navigation options to customize the behavior and appearance of your bottom sheet. Focus extensively on styling the bottom sheet screen to achieve a polished, professional look that enhances user experience. Discover alternative implementation methods and approaches to give you flexibility in your own projects. Access the complete source code and follow along with detailed timestamps to build this modern UI component that can elevate your React Native applications.

Syllabus

0:00 Introduction
01:30 Cloning Budget Buddy App
04:50 Starting the App
06:35 Installing Expo Blur
07:45 Project Overview
09:47 Creating Bottom Sheet Screen
14:41 Modifying Sheet Navigation Options
16:49 Styling Bottom Sheet Screen
31:04 Exploring Implementation Alternatives
36:19 Conclusion

Taught by

Code with Beto

Reviews

Start your review of Blur Bottom Sheet using React Navigation - React Native Expo Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.