Building Twitter Bottom Sheet with React Native | Tutorial Expo | Code with Beto

Learn how to build a bottom sheet modal inspired by Twitter's design using React Native and Expo. You'll learn how to set up the project, installing necessary dependencies, and creating a bottom sheet with multiple snap points and smooth animations.

The tutorial is practical and for React Native developers who want to add interactive bottom sheets to their apps, especially those using Expo. It also touches on styling and handling gestures with Reanimated and Gesture Handler.

What's inside

Introduction to the Twitter-style bottom sheet modal
Setting up the Expo project and installing dependencies
Configuring Reanimated and Gesture Handler for Expo
Creating the bottom sheet modal with snap points
Managing bottom sheet state with React refs and hooks
Styling the bottom sheet to match Twitter's rounded design
Adding interactive UI elements inside the bottom sheet
Tips for expanding and customizing the bottom sheet

I start by showing the Twitter app's bottom sheet modal as inspiration. This modal has three main states or snap points: about 20%, 45-50%, and a fully expanded state. The tutorial focuses on replicating the look and feel of this modal with smooth animations and rounded corners.

The bottom sheet is designed to slide up from the bottom with a button press, and users can drag it between snap points. The UI inside the modal is a demo placeholder but can be customized for any content.

Setting up the Expo project and installing dependencies

The tutorial uses Expo SDK 46 to create a new React Native app with the command:

After opening the project in Visual Studio Code, the essential dependencies are installed:

for the bottom sheet component
for handling gestures
for smooth animations

I emphasize installing the core bottom sheet package last to avoid issues.

Configuring Reanimated and Gesture Handler for Expo

Because the project uses Expo, the tutorial shows how to configure to include the Reanimated plugin. This step is necessary for Reanimated to work properly.

Also, I demonstrate importing at the top of to enable gesture handling. This import must be at the top to avoid runtime errors.

These setup steps ensure the bottom sheet and gestures run smoothly without conflicts.

The core of the tutorial is creating the bottom sheet modal using from . I explain:

Using to create a reference to the bottom sheet modal
Defining snap points as an array of percentages (e.g., ['25%', '48%', '75%'])
Wrapping the app in to manage modal context
Calling the method on the modal ref to open the bottom sheet

The initial snap point index controls the starting height of the modal. Users can drag the modal between snap points.

Managing bottom sheet state with React refs and hooks

I show how to manage the bottom sheet's open state using React's . The function calls safely with optional chaining to avoid errors if the ref is null.

This approach keeps the modal controlled and allows triggering it from a button press. The tutorial also mentions that more complex state management can be added as needed.

Styling the bottom sheet to match Twitter's rounded design

To replicate Twitter's style, the tutorial adds a prop to the bottom sheet modal with a border radius of 50. This creates the rounded top corners.

The content inside the modal is wrapped in styled components with padding and centered alignment. I also show how to style text with heavy font weight and letter spacing for a polished look.

Changing the modal background color from white to gray helps visualize the modal boundaries during development.

Adding interactive UI elements inside the bottom sheet

Inside the bottom sheet modal, I add a simple text element as a placeholder. It also demonstrates adding a React Native component to toggle dark mode, showing how to include interactive controls inside the modal.

This part illustrates how you can customize the modal content with any React Native components to fit your app's needs.

Tips for expanding and customizing the bottom sheet

I encourage adding more snap points to the array to allow more modal states. Changing the initial index lets you control the modal's start height.

It also suggests exploring the bottom sheet modal's documentation for additional props and customization options like animations and gestures.

The tutorial is a solid foundation for building complex bottom sheets with smooth UX in React Native apps.

Resources

LessonAnimations and Gestures

Reanimated, gesture-handler, and interactive UI patterns when Ease is not enough.

Pro membershipPro membership

Get access to all projects, lessons, and premium content.

Let's connect!

Building Twitter Bottom Sheet with React Native | Tutorial Expo