Why I Fell in Love with Gorhom Bottom Sheet in React Native (Expo)

Gorhom Bottom Sheet is one of the smoothest, most flexible UI components in React Native. In this post, I’ll share why I loved using it in my Expo app, how to get started, and where it truly shines.

zahid ansari

Building scalable systems by applying mental models to code and architecture.

General

Website

Resources

Install this app to stay connected and in the loop.

Building meaningful experiences one pixel at a time 😉.

Made with by Zahid

views

Why I Fell in Love with Gorhom Bottom Sheet in React Native (Expo)

When I was building my app in Expo, I stumbled upon a gem that instantly made my UI feel more modern and interactive: Gorhom Bottom Sheet. And let me tell you—it worked like magic.

What’s So Good About It?

Honestly? Everything.

Smooth animations out of the box
Native feel, but built in React Native
Insanely easy to customize
Works seamlessly in Expo
Perfect for things like filters, forms, menus, or modals

Installation

If you’re using Expo, setup is a breeze. Just install the required packages:

npx expo install @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler

Don’t forget to wrap your app with

GestureHandlerRootView

and make sure

react-native-reanimated

is configured correctly in

babel.config.js

Basic Usage Example

Here’s a minimal example to get you started:

import React, { useRef, useMemo } from 'react';
import { View, Text, Button } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const MyBottomSheet = () => {
  const sheetRef = useRef<BottomSheet>(null);
  const snapPoints = useMemo(() => ['25%', '50%'], [])

  return (
    <>
      <Button title="Open Bottom Sheet" onPress={() => sheetRef.current?.expand()} />
      <BottomSheet
        ref={sheetRef}
        index={-1}
        snapPoints={snapPoints}
      >
        <View style={{ padding: 20 }}>
          <Text>This is a bottom sheet!</Text>
        </View>
      </BottomSheet>
    </>
  )
 };

Real-World Use Case

I used it for a calendar day configuration UI—where tapping on a day opens a bottom sheet to let users set working hours or mark a holiday. It looked so clean and felt incredibly smooth. No jank, no lag, just a slick user experience.

Final Thoughts

If you're building with React Native or Expo, Gorhom Bottom Sheet is 100% worth adding to your toolkit. It took my app's UX to the next level without any extra headache.

Tech Stack: React Native, Expo, Gorhom Bottom Sheet, React Native Reanimated