React Native Bottom Sheet

What is Bottom Sheet in React Native?

A Bottom Sheet is a UI element that slides up from the bottom of the screen, revealing additional content or options. It serves as a contextual container and allows users to perform actions or access information without obstructing the main content of the app. The open-source community provides several libraries and components that simplify the implementation of Bottom Sheets in React Native mobile applications.

Use Cases

Bottom Sheets can be utilized in various scenarios to enhance the user experience. Some common use cases include

• Displaying additional options and/or actions corresponding to the current screen.
• Displaying information or details about a specific item or object.
• Implementing filters or sorting for a listing or search results.
• Implementing interactive menus or even navigation panels.

Installing Dependencies

You can create a Bottom Sheet using several libraries. One of which is the @gorhom/bottom-sheet.

Additional Dependencies include:

Follow the installation guides for react-native-reanimated and react-native-gesture-handler.

Implementing Bottom Sheet in React Native Apps

After installing the dependencies, you can begin the implementation of the Bottom Sheet in React Native by importing the BottomSheet component.

The BottomSheet component can be used in your application as follows:

React Native Bottom Sheet provides various components to create flexible and interactive bottom sheet UIs. Here are some commonly used components:

• BottomSheetScrollView:
  A scrollable view component that can be used inside the bottom sheet. It enables you to display a list of content that requires scrolling within the bottom sheet.

• BottomSheetFlatList:
  Similar to BottomSheetScrollView, this component allows you to render a flat list inside the bottom sheet. It is optimized for rendering large lists efficiently.

• BottomSheetSectionList:
  This component is used to render a sectioned list inside the bottom sheet. It provides support for dividing the list into multiple sections with headers.

• BottomSheetDraggableView:
  A draggable view component that can be used to create draggable handles or custom draggable elements within the bottom sheet. It enables users to interactively drag the bottom sheet.

• BottomSheetBackdrop:
  This component represents the backdrop behind the bottom sheet. It allows you to customize the appearance of the backdrop, such as adding transparency or applying animations.

• BottomSheetModal:
  A modal component that can be used to display the bottom sheet in a modal-like manner. It provides additional features like overlaying the rest of the screen and preventing interactions with underlying components.

Setting a Custom Height

To set a custom height for the React Native Bottom Sheet, you can use the snapPoints prop of the BottomSheet component. The snapPoints prop allows you to define an array of heights at which the bottom sheet will snap when dragged or animated.

The given array can accept inputs of both numbers and strings.

Here's an example of how you can set a custom height for the React Native Bottom Sheet:

Index 0	Index 1	Index 2

Custom Backdrop Color

To customize the backdrop color of Bottom Sheet in React Native, this library provides a custom component viz, BottomSheetBackdrop You can use the prop backdropComponent to render the backdrop:

Implementation of Modal Bottom Sheet in React Native

Modal Bottom Sheets are a variant of the Bottom Sheet that covers the entire screen, focusing the user's attention on the content within the sheet. We will demonstrate how to implement a Modal Bottom Sheet in React Native, showcasing its benefits.

To initiate the implementation of the modal bottom sheet, we will utilize the BottomSheetModal and BottomSheetModalProvider components from the library. We need to wrap the entire application with the BottomSheetModalProvider only then, we can incorporate the BottomSheetModal component from the library.

Passing Data to Modal Sheet Bottom

To get the data, we are going to utilize the Random User Generator API to display a list of users.

You can make use of Axios or Javascript's own Fetch API to make API call to fetch the list of random users.

Let's create a component to render the list of names of users inside the modal bottom sheet:

After successfully implementing the Modal Bottom Sheet in our React Native app, our next step is to render the DataComponent inside the modal bottom sheet where you want to display the list.

Thus, using custom props of the children components, we can provide the data inside the Modal Bottom Sheet in React Native.

Styling

We have added more details of users fetched from the API and you can style the bottom sheet as per your preferences using StyleSheet.