Exploring React Native Bottom Sheet: Implementation, Examples, and Setup

‍In this article, we discuss a design paradigm that has recently redefined how we interact with mobile apps. The Bottom Sheet is more than just a trend; it's a user-centric design pattern that elegantly caters to the needs and expectations of modern mobile users.

‍

Read: "Expo OTA Updates Not Working? Here's How expo-ota-manager Can Save You Time and Hassle with OTA Updates".

The mobile app realm has seen its fair share of metamorphosis in the ever-evolving landscape of design trends and user experience principles. Different from their desktop counterparts, mobile interfaces demanded fresh approaches and innovative solutions. One such innovation that has gained prominence is the concept of the "bottom sheet."

Over the years, design trends and best practices for user experience have undergone constant evolution, especially in the realm of mobile user experience. In the early days of mobile development, designers often leaned on their knowledge of desktop and web interfaces, trying to shift these ideas into mobile application development. However, it soon became evident that mobile devices operated on entirely distinct paradigms compared to desktop systems. Some of the user experience patterns that functioned seamlessly with a traditional mouse and mechanical keyboard proved less effective when applied to touch interfaces. Among these patterns was the ubiquitous 'popup window.'

Traditionally, a popup window presented users with a set of options at the centre of the screen, typically associated with the ongoing action or task. However, as mobile devices gradually increased in screen size over the years, the one-handed operation became increasingly challenging, if not impossible for many users. These larger screens pushed popups out of convenient reach for single-handed use. This presented a compelling challenge in mobile user experience design, sparking the need for an innovative solution.

The answer was deceptively simple: designers moved the popup modal from the centre to the bottom of the screen and called it the 'bottom sheet.' The shift not only addressed accessibility concerns for one-handed users but also opened up new possibilities for interaction and information display. Since its inception, the bottom sheet design pattern has continued to evolve, expanding its capacity to hold a broader array of information and accommodating various stylistic designs. This transformation represents a significant stride in mobile user experience design, ensuring that users can effortlessly access options and information on today's larger mobile screens.

If you want to see what is possible with bottom sheet design and be inspired by many different designs, head over to Dribbble.

‍

Implementing Bottom Sheet Design Pattern in React Native

‍

React Native is a popular framework for creating mobile experiences that run on many different devices and operating systems, all from one code base. Because the popularity of the technology ecosystem is big, there are a lot of open-source projects where people share their work openly. One of those projects is React Native Bottom Sheet.

This is what we will use to implement the bottom sheet design into a React Native App. We are going to implement two different bottom sheet designs.

‍

Bottom sheet with variable height:

‍

- In this scenario, the user can open the bottom sheet by tapping the button, then expand the sheet more (up the height that we allow), and close it by pressing a button or swiping down over the sheet.

‍

Bottom sheet modal popup:

‍

- This bottom sheet will be more like a regular popup modal, but it will "pop up" at the bottom of the screen, and the user will only be able to dismiss it by pressing a button inside the modal.

‍

Bottom Sheet Setup Example

‍

Before we start, I should tell you that we have created an example repository where all the code is located. You can run it locally on your machine.

First, we need to set up the Expo React Native project.

Next, we need to install the bottom sheet package and peer dependencies of the bottom sheet package.

Since the bottom sheet package depends on the React Native Reanimated Library, we also need to modify our babel config for that package. We need to modify the plugin property of our Babel config.

Now, we are all set to start implementing our bottom sheet components.

‍

Bottom sheet with variable height

‍

We are going to create our custom component that will wrap up the actual bottom sheet component.

This is the complete source code for the component.

Let's break down the source.

First, we need to create snappoints that determine how big the bottom sheet can be concerning the screen. In the demo, I've decided to make the bottom sheet 30% percent of the screen and optionally increase it to 60% of the screen.

Then, we create a "handler" for the bottom sheet to track at which "point" the bottom sheet currently is. The handler will receive the "index" of the "snappoints" array.

We also track if we should show the bottom sheet by monitoring the "showBottomSheet" variable via "useEffect". This variable is toggled via the button in the app.

‍

- We set the starting index to "-1, " meaning that the bottom sheet will be hidden at the start.

- We enable the pan down to close gesture by setting the "enablePanDownToClose" property to "true".

- Set up our "snappoints" via the snappoints property.

- Set up our handler via the onChange property.

- Connect the "ref" prop to our "useRef" call set earlier.

- Add content to the bottom sheet component. We do this by adding our components as children of the "BottomSheet" component. Inside the content, we create a button that will toggle the sheet animation between two different "snappoints" we defined earlier.

‍

Bottom Sheet Modal Popup

‍

Creating the modal popup from the bottom sheet is pretty much the same as creating the regular bottom sheet, although there are a couple of differences.

- we set the "enablePanDownToClose" gesture to false, which disables swiping the modal down (the user will have to press a button)

- we set the "detached" to "true". This property makes the bottom sheet detach from the bottom and behave more like a regular popup modal.

- set bottomInset to control how far from the bottom of the screen the sheet will be positioned since it is detached.

And that is it! These are two straightforward examples using the bottom sheet design pattern in a React native app.

We have a repository with the example bottom sheets available on GitHub, so you can test it, check out the code and run it locally.

‍

Liked this post? Make sure to sign up for our monthly newsletter for more tutorials!