gorhom/react-native-bottom-sheet

★ 8,937TypeScriptAudience · developerComplexity · 2/5LicenseSetup · moderate

Mindmap

mindmap
  root((bottom-sheet))
    What it does
      Slide-up panel
      Gesture driven
      Snap to positions
    Features
      Scrollable lists
      Keyboard handling
      Modal variant
      Dynamic sizing
    Tech Stack
      TypeScript
      React Native
      Reanimated
    Use Cases
      Menus and filters
      Detail views
      Form inputs

mindmap root((bottom-sheet)) What it does Slide-up panel Gesture driven Snap to positions Features Scrollable lists Keyboard handling Modal variant Dynamic sizing Tech Stack TypeScript React Native Reanimated Use Cases Menus and filters Detail views Form inputs

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a slide-up bottom sheet with a scrollable list to a React Native app for filters, menus, or detail views.

USE CASE 2

Display a modal bottom sheet that dims the background and blocks interaction with the rest of the screen.

USE CASE 3

Build a bottom sheet containing a text input that handles keyboard appearance correctly on both iOS and Android.

Tech stack

TypeScriptReact NativeReanimatedGesture Handler

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Reanimated v3 and Gesture Handler v2 to be installed and configured before the sheet will work.

Use freely for any purpose, including commercial use, with no restrictions beyond keeping the copyright notice.

In plain English

React Native Bottom Sheet is a UI component library for building bottom sheets in React Native apps. A bottom sheet is the panel that slides up from the bottom of the screen, commonly used for menus, filters, detail views, or any content that overlays the main screen without fully replacing it. This library provides a version that responds smoothly to gestures, snaps to predefined positions, and handles edge cases that are easy to get wrong when building this kind of component from scratch. The library supports several common content types inside the sheet: scrollable lists including FlatList, SectionList, and ScrollView, as well as plain views. It handles keyboard appearance on both iOS and Android without requiring extra configuration, so text inputs inside the sheet work correctly when the keyboard appears. A modal variant is included for cases where the bottom sheet should dim the background and block interaction with the rest of the screen. Dynamic sizing lets the sheet grow or shrink based on its content, and pull-to-refresh is supported for scrollable lists inside the sheet. The library runs on React Native Web in addition to iOS and Android, and is compatible with Expo. It integrates with the React Navigation library used in many React Native projects. The current version (v5) is built on the Reanimated v3 and Gesture Handler v2 animation libraries, which handle the performance-sensitive parts of the animations. Older branches supporting earlier versions of those libraries exist but are no longer maintained. The project is written in TypeScript and released under the MIT license.

Copy-paste prompts

Prompt 1

Show me how to add a react-native-bottom-sheet to my screen that snaps to 25%, 50%, and 100% of the screen height.

Prompt 2

How do I put a FlatList inside a react-native-bottom-sheet so it scrolls independently of the sheet's drag gesture?

Prompt 3

Give me the code to open a modal bottom sheet with a dimmed background when a button is pressed, using react-native-bottom-sheet v5.

Prompt 4

How do I make a react-native-bottom-sheet resize dynamically to fit its content rather than snapping to fixed heights?

Open on GitHub → Explain another repo

← gorhom on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.