whatisgithub

What is react-native-bottom-sheet?

gorhom/react-native-bottom-sheet — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

A React Native UI component that adds a smooth, gesture-driven bottom sheet panel to iOS and Android apps, with built-in support for scrollable lists, keyboard handling, and modal mode.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

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.

What is it built with?

TypeScriptReact NativeReanimatedGesture Handler

How does it compare?

gorhom/react-native-bottom-sheetmidudev/aprendiendo-reactsoftwarebrothers/adminjs
Stars8,9378,9368,935
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity2/52/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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?

Frequently asked questions

What is react-native-bottom-sheet?

A React Native UI component that adds a smooth, gesture-driven bottom sheet panel to iOS and Android apps, with built-in support for scrollable lists, keyboard handling, and modal mode.

What language is react-native-bottom-sheet written in?

Mainly TypeScript. The stack also includes TypeScript, React Native, Reanimated.

What license does react-native-bottom-sheet use?

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

How hard is react-native-bottom-sheet to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is react-native-bottom-sheet for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.