Finance Certifications Goldman Sachs & Amazon Teams Trust
Earn Your CS Degree, Tuition-Free, 100% Online!
Overview
Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
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