I recently switched jobs, and one of my first tasks 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 mesmerized that I decided to write a simple tutorial on creating a bottom sheet in React Native.
A bottom sheet is a useful component that slides up from the bottom of the screen and often contains different options. It's very common in modern design and used by apps such as Uber, Zomato, and many more.
Here's what the final result will look like:
So let’s take a look at how to create a bottom sheet in React Native.
Getting Started
First, 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, check out 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 react-native-modalbox@1.7.1
Note: Remember to install 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:
This is the bare bones of our bottom sheet/modal. We’ll just show at 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:
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.
Our modal has a prop named “isOpen” that we can toggle to show/hide our bottom sheet. To show it 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.
The code looks much cleaner now. But our bottom sheet still 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:
Here’s what the final code looks like:
We’ve finally created our bottom sheet in React Native. It is so simple and much easier to create than 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, let me know what your experience was.
Join the AndroidVille SLACK workspace for mobile developers where people share their learnings about the latest in tech, especially 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.