How to Create a BottomSheet in React Native

I recently switched jobs and one of the first task was to create a bottom sheet in react native. Coming from a native android development background I thought it was going to be as daunting as creating a bottom sheet in native. But I was so wrong! I was so mesmerised that I decided to write a simple tutorial on creating a bottom sheet in react native.

BottomSheet is a really useful component in modern design and is being used widely by apps such as Uber, Zomato, etc…

Here’s how the final result would look like:

So let’s take a look at how to create a bottom sheet in react native.

Getting Started

Create a new project in react native. I’m using expo-cli for this. If you’re unaware of expo-cli or just getting started with React Native, checkout this link. I’ve named my project BottomSheetDemo.

Next up, we’ll need to install react-native-modalbox. This provides us with many inbuilt capabilities such as animations, positions, backdrops etc.

$ expo install [email protected]

Note: Remember to install the version 1.7.1. The latest version has a bug where backdropPressToClose doesn’t work. 

Creating the Modal

It’s time to create our modal. Remove the code that you’re provided with in the beginning and add the following to your App.js file: 

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, Dimensions, TouchableWithoutFeedback } from 'react-native';
import Modal from "react-native-modalbox";
import {verticalScale} from './Utils/ScreenUtils';

const {width, height } = Dimensions.get("window");

export default function App() {
  return (
    <View>
      <Modal>
        <View>
          <Text>AndroidVille</Text>
        </View>
      </Modal>
    </View>
  );
}

This is the bare bones of our bottom sheet/modal. We’ll just show af text at the center of the modal.

Adding Interaction

We need the bottom sheet to show up when a button is pressed. Let’s add some interaction. 

I’ll be adding a simple button in the middle of the screen:

export default function App() {
  return (
    <View>
      <Button title="Press Me!" />
        
        //...

On clicking this button, we need to show/hide our bottom sheet. To do this, we’ll maintain a state using the useState react hook.

export default function App() {

  const [modalVisible, setModalVisible] = useState(false);

       //...

Our Modal has a prop named “isOpen” we can toggle this to show/hide our bottom sheet. To show we’ll simply set modalVisible to false and vice-versa.

But first, let’s separate out our Modal from the rest of the code as it is starting to get a bit messy. I’ll create a separate function which will return my modal.

export default function App() {

  const [modalVisible, setModalVisible] = useState(false);

  const getModal = () => {
    return (
      <Modal
        entry="bottom"
        backdropPressToClose={true}
        isOpen={modalVisible}
        style={styles.modalBox}
        onClosed={() => setModalVisible(false)}
      >
        <View style={styles.content}>
          <Text style={styles.textStyle}>AndroidVille</Text>
        </View>
      </Modal>
    );
  };

Code looks much cleaner now. But still our bottom sheet doesn’t look exactly like a bottom sheet. We need to add some styling.

Let’s add some Styling!

Create a stylesheet and add the following styles to it: 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
    alignItems: "center",
    justifyContent: "center"
  },
  modalBox: {
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
    height,
    width,
    backgroundColor: "transparent"
  },
  content: {
    position: "absolute",
    bottom: 0,
    width,
    height: verticalScale(250),
    borderTopLeftRadius: 20,
    justifyContent: "center",
    alignItems: "center",
    borderTopRightRadius: 20,
    backgroundColor: "white"
  },
  textStyle: {
    fontSize: 22
  }
});

Here’s what the final code looks like: 

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, Dimensions, TouchableWithoutFeedback } from 'react-native';
import Modal from "react-native-modalbox";
import {verticalScale} from './Utils/ScreenUtils';

const {width, height } = Dimensions.get("window");

export default function App() {

  const [modalVisible, setModalVisible] = useState(false);

  const getModal = () =>{
      return (
        <Modal
          entry="bottom"
          backdropPressToClose={true}
          isOpen={modalVisible}
          style={styles.modalBox}
          onClosed={() => setModalVisible(false)}
        >
          <View style={styles.content}>
            <Text style={styles.textStyle}>AndroidVille</Text>
          </View>
        </Modal>
      );
  };


  return (
    <View style={styles.container}>
      <Button title="Press Me!" onPress={() => setModalVisible(true)} />
      {getModal()}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
    alignItems: "center",
    justifyContent: "center"
  },
  modalBox: {
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
    height,
    width,
    backgroundColor: "transparent"
  },
  content: {
    position: "absolute",
    bottom: 0,
    width,
    height: verticalScale(250),
    borderTopLeftRadius: 20,
    justifyContent: "center",
    alignItems: "center",
    borderTopRightRadius: 20,
    backgroundColor: "white"
  },
  textStyle: {
    fontSize: 22
  }
});

We’ve finally created our bottom sheet in react native. It is so simple and easier to create than the bottom sheet in native android. I can’t comment on iOS since I’ve never tried that.

So, if you’re an iOS developer or have experience creating a bottom sheet in iOS, comment down below, what’s the experience.

*Important*: Join the AndroidVille SLACK  workspace for mobile developers where people share their learnings about everything latest in Tech, especially in Android Development, RxJava, Kotlin, Flutter, and mobile development in general.

Click on this link to join the workspace. It’s absolutely free!

Like what you read? Don’t forget to share this post on Facebook, Whatsapp, and LinkedIn.

You can follow me on LinkedIn, Quora, Twitter, and Instagram where I answer questions related to Mobile Development, especially Android and Flutter.

If you want to stay updated with all the latest articles, subscribe to the weekly newsletter by entering your email address in the form on the top right section of this page.