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