Bottom Sheet React Native | Expo Tutorial 2022 | Code with Beto

Learn how to create a bottom sheet component in React Native with Expo and TypeScript. You'll learn how to set up a new Expo project, installing dependencies, and configuring the bottom sheet to open at specific snap points. The tutorial is practical and for developers who want to add a smooth bottom sheet UI similar to those seen in apps like the App Store.

You will learn how to control the bottom sheet’s height, enable drag-to-close gestures, and customize the content inside the sheet. I also demonstrate how to toggle the bottom sheet open and closed with a button and how to adjust styles dynamically based on the sheet’s state.

What's inside

Starting a new Expo project with TypeScript
Installing and configuring bottom sheet dependencies
Setting snap points to control bottom sheet height
Enabling pan-down gesture to close the sheet
Creating a reusable bottom sheet content component
Using SafeAreaView for proper layout on devices
Changing styles dynamically based on bottom sheet state
Adding a button to open the bottom sheet programmatically

Starting a new Expo project with TypeScript

I start by creating a new Expo project named using the Expo CLI. It emphasizes selecting TypeScript during setup to have type safety throughout the app. After the project installs, you open it in Visual Studio Code and prepare to add the bottom sheet functionality.

This step ensures you have a clean, modern React Native environment with Expo, ready for adding third-party UI components like the bottom sheet.

Installing and configuring bottom sheet dependencies

Next, you install three key packages: for the bottom sheet UI, for smooth animations, and for gesture support. These are installed via Expo’s package manager commands.

After installation, you update the file to include the Reanimated plugin, which is necessary for the animations to work correctly. You must then restart the Expo server to apply these changes.

Setting snap points to control bottom sheet height

The bottom sheet component accepts an array of snap points that define the heights it can snap to when dragged. In the example, you set a single snap point at 40% of the screen height, so the sheet only opens to that size and no more.

This restricts the bottom sheet to a fixed height, similar to payment sheets in iOS apps. You pass the snap points array as a prop and assign a ref to control the sheet programmatically.

Enabling pan-down gesture to close the sheet

You enable the prop on the bottom sheet, allowing users to drag the sheet downward to close it. This gesture improves UX by providing an intuitive way to dismiss the sheet.

I note that once closed this way, the sheet cannot be reopened without restarting the app unless you add a button to open it again.

Creating a reusable bottom sheet content component

To keep the code organized, you create a separate component file for the bottom sheet content. This component includes an image and some text, demonstrating how you can customize the sheet’s UI with any React Native elements.

You import and render this component inside the bottom sheet view, making it easy to swap or update the content without changing the main app logic.

Using SafeAreaView for proper layout on devices

The main app view is wrapped in a to avoid UI elements overlapping with device notches or status bars. This ensures the bottom sheet and other content display correctly on all devices.

I show how switching from a plain to improves the app’s appearance and layout consistency.

Changing styles dynamically based on bottom sheet state

You use React state to track whether the bottom sheet is open or closed. Based on this state, you conditionally change styles such as the background color of the main view and the opacity of images inside the sheet.

For example, when the sheet is open, the background turns black with some opacity to highlight the sheet, and when closed, it returns to white. This dynamic styling enhances the visual feedback for users.

Adding a button to open the bottom sheet programmatically

Since the pan-down gesture closes the sheet without a way to reopen it, you add a button using that triggers a function to snap the bottom sheet back to its open position.

This function uses the bottom sheet ref and calls to open the sheet to the first snap point. It also updates the open state to true. This approach gives users control to reopen the sheet without restarting the app.

Resources

CourseReact Native course

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

YouTubeReact Native Bottom Sheet Tutorial

Watch the full video tutorial on implementing bottom sheets with Expo and TypeScript.

Let's connect!