Blur Bottom Sheet using React Navigation | React Native Expo Tutorial

Learn how to build a bottom sheet with a blurred background in React Native using only React Navigation and Expo. No third-party bottom sheet libraries are used, which keeps the implementation simple and leverages native navigation features.

You'll see how to set up a new screen as a bottom sheet, navigate to it, and apply a blur effect behind it that works on both iOS and Android. This is ideal if you want a lightweight bottom sheet without extra dependencies, but be aware of some trade-offs like limited background color options.

What's inside

• Introduction to the budget body app used as a base
• Cloning and setting up the project with Expo and dependencies
• Installing Expo Blur and Expo Vector Icons for UI enhancements
• Overview of the existing navigation setup with React Navigation
• Creating a new bottom sheet screen and integrating it into navigation
• Adding a button on the home screen to open the bottom sheet
• Configuring the bottom sheet presentation style and animation
• Using Expo Blur to create the blurred background effect

Introduction to the budget body app used as a base

The tutorial uses the budget body app, a project previously created and available on the Code with I website. This app is built with React Native, Expo, and React Navigation, and includes SQLite for data persistence.

I assumes you are familiar with React Navigation and have it set up in your app. The budget body app serves as a practical example to integrate the bottom sheet feature, so you can follow along with a real-world codebase.

Cloning and setting up the project with Expo and dependencies

You start by cloning the budget body repository from GitHub and opening it in VS Code. After cloning, run yarn to install dependencies.

Since the project uses Expo, you run npx expo start to launch the development server. I also show how to switch to development builds by pressing s in the Expo CLI, which allows building native code for features like blur.

Next, you run npx expo prebuild to generate native iOS and Android folders, preparing the project for native modules like Expo Blur.

Installing Expo Blur and Expo Vector Icons for UI enhancements

To create the blur effect and use icons, you install two Expo packages: expo-blur and @expo/vector-icons.

• expo-blur provides the BlurView component for the blurred background.
• @expo/vector-icons offers icon sets compatible with iOS and Android.

These packages are installed with expo install expo-blur @expo/vector-icons. After installation, you run npx expo prebuild again to ensure native code is updated.

Overview of the existing navigation setup with React Navigation

The app uses React Navigation with a stack navigator. The navigation container wraps the stack, which currently has a single screen: Home.

The stack navigator is configured in app.tsx. This setup is standard for React Navigation and familiar if you have used it before.

I briefly reviews the package.json dependencies related to navigation, including @react-navigation/native and @react-navigation/native-stack.

Creating a new bottom sheet screen and integrating it into navigation

You create a new screen file called Payment.tsx to serve as the bottom sheet.

This screen is a React component exported as default. Initially, it just renders a simple View with some text.

Then, you add this screen to the stack navigator in app.tsx by duplicating the existing stack screen entry and replacing the component with Payment.

This makes the bottom sheet a new screen in the navigation stack, which you can navigate to and dismiss like any other screen.

Adding a button on the home screen to open the bottom sheet

On the Home screen, you add a button labeled "Go to Payment" using React Native's Button component.

You use the useNavigation hook from React Navigation to get the navigation object.

The button's onPress handler calls navigation.navigate('Payment') to open the bottom sheet screen.

This lets you open the bottom sheet from the home screen with a tap.

Configuring the bottom sheet presentation style and animation

By default, the new screen uses the standard stack presentation animation.

To make it behave like a bottom sheet, you adjust the screen options in the stack navigator.

You can set the presentation option to "modal" or "transparentModal" to change how the screen appears.

I mention some limitations: you cannot easily set a dark background with this approach because it can look bad with the animation.

This approach uses React Navigation's native modal presentation instead of a third-party bottom sheet library.

Using Expo Blur to create the blurred background effect

Inside the bottom sheet screen, you use the BlurView component from expo-blur to create a translucent blurred background.

This blur effect works on both iOS and Android, though the Android blur is lighter.

You place the BlurView behind the content of the bottom sheet so that the content behind the sheet is visible but blurred.

This creates a modern, polished UI effect without extra dependencies.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Access exclusive tutorials and source code for advanced React Native patterns.