How to Create and Customize a Bottom Sheet in React Native

Introduction

React Native is a popular open-source framework that allows developers to create cross-platform mobile applications using JavaScript. It has become popular among developers because of its flexibility and ease of use. One of the features of React Native is the ability to create and customize bottom sheets. In this tutorial, we will learn how to create and customize a bottom sheet in React Native. This is precisely how we built most of our React Native templates.

What Is a Bottom Sheet in React Native?

A bottom sheet is a type of modal window that slides up from the bottom of the screen. It is used to display additional information or options that are related to the current screen. Bottom sheets can be used for a variety of purposes, such as displaying a list of options, a form, or additional information.

How to Create a React Native App

Before we can create a bottom sheet in React Native, we need to create a React Native application. To do this, we will need to install the React Native CLI (command line interface).

Once the CLI is installed, we can create a new React Native project using the following command:

react-native init MyProjectName

This will create a new React Native project with the name “MyProjectName” in the current directory.

How to Install the Dependencies (@gorhom/bottom-sheet)

We will need to install the @gorhom/bottom-sheet dependency in order to create a bottom sheet in React Native. To do this, we can use the following command:

npm install @gorhom/bottom-sheet

How to Implement a Bottom Sheet in React Native

Now that we have installed the necessary dependencies, we can create a bottom sheet in our React Native project. To do this, we will need to create a functional component and import the BottomSheet component from the @gorhom/bottom-sheet package.

import { BottomSheet } from '@gorhom/bottom-sheet';

const MyComponent = () => {
  return (
    <BottomSheet />
  );
};

export default MyComponent;

This code creates a basic bottom sheet component. We can now customize it to fit our needs.

How to Customize the Bottom Sheet in React Native

We can customize the bottom sheet in React Native by passing props to the BottomSheet component. These props can be used to set the initial state of the bottom sheet, such as the background color, the height, and the content of the bottom sheet.

For example, the following code will set the initial state of the bottom sheet to have a background color of “#fff”, a height of “50%”, and a content of “Hello World!”:

import { BottomSheet } from '@gorhom/bottom-sheet';

const MyComponent = () => {
  return (
    <BottomSheet
      backgroundColor="#fff"
      height="50%"
      content="Hello World!"
    />
  );
};

export default MyComponent;

Various Bottom Sheet Examples

Here are some additional examples of how to customize a bottom sheet in React Native:

Example 1 - Setting the Initial State

In this example, we will set the initial state of the bottom sheet to have a background color of “#fff”, a height of “50%”, and a content of “Hello World!”:

import { BottomSheet } from '@gorhom/bottom-sheet';

const MyComponent = () => {
  return (
    <BottomSheet
      backgroundColor="#fff"
      height="50%"
      content="Hello World!"
    />
  );
};

export default MyComponent;

In this code, we are importing the BottomSheet component from the @gorhom/bottom-sheet package and then passing props to it to customize the initial state of the bottom sheet. The backgroundColor prop sets the background color of the bottom sheet, the height prop sets the height of the bottom sheet, and the content prop sets the content of the bottom sheet.

Example 2 - Setting an OnPress Function

In this example, we will set an onPress function to the bottom sheet. This will allow us to trigger a function when the bottom sheet is pressed:

import { BottomSheet } from '@gorhom/bottom-sheet';

const MyComponent = () => {
  const onPress = () => {
    // Do something here
  };

  return (
    <BottomSheet
      backgroundColor="#fff"
      height="50%"
      content="Hello World!"
      onPress={onPress}
    />
  );
};

export default MyComponent;

In this code, we are importing the BottomSheet component from the @gorhom/bottom-sheet package and then passing a prop called onPress. This prop is a function that will be triggered when the bottom sheet is pressed.

Example 3 - Setting the Data

In this example, we will set the data of the bottom sheet. This will allow us to display a list of items in the bottom sheet:

import { BottomSheet } from '@gorhom/bottom-sheet';

const MyComponent = () => {
  const data = [
    {
      id: 1,
      name: 'Item 1'
    },
    {
      id: 2,
      name: 'Item 2'
    },
    {
      id: 3,
      name: 'Item 3'
    }
  ];

  return (
    <BottomSheet
      backgroundColor="#fff"
      height="50%"
      data={data}
    />
  );
};

export default MyComponent;

In this code, we are importing the BottomSheet component from the @gorhom/bottom-sheet package and then passing a prop called data. This prop is an array of objects that will be used to display a list of items in the bottom sheet. Check out Tailwind Templates

Conclusion

In this tutorial, we learned how to create and customize a bottom sheet in React Native. We learned how to install the necessary dependencies, how to create a bottom sheet component, and how to customize it by passing props. We also saw various examples of how to customize a bottom sheet in React Native.

In the next article, we'll take a look at how we can achieve this in Flutter.