git404hub

what is react-native-bottom-sheet fr?

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

Analysis updated 2026-06-24

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

tl;dr

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.

vibe map

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

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 make with this?

VIBE 1

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

VIBE 2

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

VIBE 3

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

what's the stack?

TypeScriptReact NativeReanimatedGesture Handler

how it stacks up fr

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 i run it?

Difficulty · moderate time til it works · 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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.