Blur Bottom Sheet using React Navigation | React Native Expo Tutorial
Beto, June 21, 2024 · 9,627 views
You don't need a bottom sheet library for this one. A regular React Navigation screen, the right option, and get you a bottom sheet with a blurred background on both iOS and Android. Fewer dependencies, native navigation behavior, and it looks great. I build it into a real budget app in the video and I'm honest about the trade-offs, like limited background color options.
What's inside
- Turn a stack screen into a bottom sheet with the option
- Add a blurred backdrop with from
- Set up development builds and for native modules
- Open and dismiss the sheet like any other screen with
- Know the limitations before you pick this approach over a library
Resources
CourseReact Native course
Go deeper in Expo Router: 115 minutes on file routing, auth flows, and modern navigation patterns.
Had a win? Get featured on Code with Beto.Share your story
Like this article? Get the rest of the library plus weekly React Native tips. Free.