Mobile | Fri Jun 21 20242,329 views

Blur Bottom Sheet with React Navigation

Hi there!

In this project, we explore how to integrate a bottom sheet view using just React Navigation. We tweak presentation options, combine custom styling with Expo Blur View, and achieve a beautiful final result. At the end, we discuss some limitations, alternatives, and best practices for this kind of sheet.

🧙‍♂️ Want to become a master in React Native? Check the React Native Course

Also, don't forget to explore the React with TypeScript Course, where we master TypeScript, handle payments, and deploy scalable applications. Learn more

Dependencies

For this project we use Expo SDK 50 with the following dependencies.

npx expo install expo-blur

Links

This feature is part of our Budget Buddy App. The following GitHub button will take you to the PR integrating the Blur Bottom Sheet.

Youtube GitHubDownload as Zip

Go back to Projects