# gorhom/react-native-bottom-sheet

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/gorhom-react-native-bottom-sheet).**

9,003 stars · 950 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/gorhom/react-native-bottom-sheet
- Homepage: https://gorhom.dev/react-native-bottom-sheet/
- awesome-repositories: https://awesome-repositories.com/repository/gorhom-react-native-bottom-sheet.md

## Topics

`bottom-sheet` `bottomsheet` `modal` `react-native` `reanimated` `sheet`

## Description

This is a bottom sheet component library for React Native that provides gesture-driven panels sliding up from the bottom of the screen. The library is built around configurable snap points, dynamic sizing, keyboard awareness, modal presentation, and synchronized scrolling, with native driver animation offloaded to the native thread for smooth performance.

The library distinguishes itself through deep gesture and animation control, including custom gesture handler overrides, scroll-gesture synchronization, and dynamic snap point recalculation when content size or keyboard visibility changes. It supports modal presentation wrappers with stack navigation integration, portal-based overlay rendering outside the parent component tree, and cross-platform compatibility including web mobile rendering without code changes. The dismissal system offers drag-to-dismiss with configurable thresholds and forced close animations, while the animation system supports spring and timing curves with accessibility-aware motion overrides.

The component handles keyboard events automatically, adjusting sheet position to keep input fields visible on both iOS and Android. It integrates with React Navigation for presenting sheets as navigable screens or modals, and supports embedding stack navigators within the sheet for multi-screen flows. Scrollable content integration synchronizes virtualized lists with sheet pan gestures, including over-drag behavior at scroll boundaries and pull-to-refresh on scrollable content inside the sheet. Snap points can be managed dynamically, with programmatic control through exposed methods and animated values, and the sheet can auto-size to content height without requiring fixed snap points. Visual customization covers the sheet background, handle, backdrop, footer, and animated UI elements like tab bars and onboarding sliders.

## Tags

### User Interface & Experience

- [Bottom Sheets](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets.md) — Provides a draggable, gesture-driven bottom sheet component with configurable snap points and smooth animations.
- [Bottom Sheet Content Resizers](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/bottom-sheet-content-resizers.md) — Automatically adjusts the bottom sheet height to fit its dynamic content size. ([source](https://cdn.jsdelivr.net/gh/gorhom/react-native-bottom-sheet@master/README.md))
- [Dynamic Sizing](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/dynamic-sizing.md) — Automatically resizes bottom sheets to match content height without requiring fixed snap points.
- [Dynamic Snap Point](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/dynamic-snap-point.md) — Automatically resizes to content height and handles changing snap points after mounting.
- [Gesture-Driven](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/gesture-driven.md) — Supports drag-to-dismiss, pull-to-refresh, and synchronized scrolling with virtualized lists inside the sheet.
- [Keyboard-Aware](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/keyboard-aware.md) — Moves the sheet and its content to prevent keyboard overlap. ([source](https://cdn.jsdelivr.net/gh/gorhom/react-native-bottom-sheet@master/README.md))
- [Keyboard-Aware Behavior](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/keyboard-aware-behavior.md) — Automatically adjusts bottom sheet position when the on-screen keyboard appears or changes height.
- [Modal](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/modal.md) — Presents the bottom sheet as a modal overlay with stack navigation support and keyboard-aware positioning.
- [Modal Presentations](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/modal-presentations.md) — Wraps bottom sheets with modal presentation for a native feel. ([source](https://gorhom.dev/react-native-bottom-sheet/modal))
- [Navigation Integrations](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/navigation-integrations.md) — Coordinates sheet open/close state with React Navigation stacks or navigators. ([source](https://gorhom.dev/react-native-bottom-sheet/))
- [Scroll-Synchronized](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/scroll-synchronized.md) — Creates scrollable components that synchronize with the sheet's gesture-driven interactions. ([source](https://gorhom.dev/react-native-bottom-sheet/hooks))
- [Scrollable Content Integrations](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/scrollable-content-integrations.md) — Supports scrolling inside FlatList, SectionList, ScrollView, and View within the sheet. ([source](https://cdn.jsdelivr.net/gh/gorhom/react-native-bottom-sheet@master/README.md))
- [Virtualized Lists](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/virtualized-lists.md) — Renders virtualized lists inside a bottom sheet that respond to the sheet's drag gestures. ([source](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetflashlist))
- [Portal Renderers](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/portal-renderers.md) — Renders sheet and backdrop outside the parent component tree using portal-based rendering.
- [Drag Dismissal Configurations](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/custom-drag-behaviors/drag-dismissal-configurations.md) — Closes the sheet when users drag it downward past a configurable threshold. ([source](https://gorhom.dev/react-native-bottom-sheet/props))
- [Gesture Handler Overrides](https://awesome-repositories.com/f/user-interface-experience/gesture-interaction-libraries/gesture-handler-overrides.md) — Ships a custom gesture handler override system for advanced bottom sheet interaction control.
- [Scroll-Gesture Synchronizations](https://awesome-repositories.com/f/user-interface-experience/gesture-interaction-tools/gesture-conflict-resolution/scroll-gesture-synchronizations.md) — Synchronizes scrollable content gestures with sheet pan gestures to prevent interaction conflicts.
- [Keyboard-Relative Positioning](https://awesome-repositories.com/f/user-interface-experience/keyboard-relative-positioning.md) — Adjusts sheet vertical offset automatically when the keyboard appears or changes height.
- [Bottom Sheet Modal Presentations](https://awesome-repositories.com/f/user-interface-experience/modal-overlays/bottom-sheet-modal-presentations.md) — Opens bottom sheets as full-screen modals blocking background interaction. ([source](https://gorhom.dev/react-native-bottom-sheet/usage))
- [Modal Sheet Presentations](https://awesome-repositories.com/f/user-interface-experience/modal-overlays/modal-sheet-presentations.md) — Displays bottom sheets as modal overlays that block background interaction and support dismissal gestures.
- [Modal Sheet Wrappers](https://awesome-repositories.com/f/user-interface-experience/modal-overlays/modal-sheet-wrappers.md) — Wraps bottom sheets in modal containers that block background interaction and support navigation stacks.
- [Native Animation Drivers](https://awesome-repositories.com/f/user-interface-experience/native-animation-drivers.md) — Offloads gesture and animation computations to the native thread for 60FPS performance.
- [Bottom Sheet Modal Presentations](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays/bottom-sheet-modal-presentations.md) — Displays bottom sheets as modal overlays dismissible by dragging or tapping. ([source](https://gorhom.dev/react-native-bottom-sheet))
- [Bottom Sheet Content Resizers](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers/resizing-constraints/iframe-content-resizers/bottom-sheet-content-resizers.md) — Automatically adjusts the bottom sheet height to fit content while respecting a maximum size. ([source](https://gorhom.dev/react-native-bottom-sheet/props))
- [Sheet Scrollable Content](https://awesome-repositories.com/f/user-interface-experience/scrollable-interfaces/scrollable-form-lists/sheet-scrollable-content.md) — Embeds scrollable lists and views inside a bottom sheet with synchronized gesture handling.
- [Snap Points](https://awesome-repositories.com/f/user-interface-experience/snap-points.md) — Moves the bottom sheet between predefined vertical positions with smooth gesture-driven snapping animations. ([source](https://gorhom.dev/react-native-bottom-sheet/v4))
- [Dynamic Snap Point Managers](https://awesome-repositories.com/f/user-interface-experience/snap-points/dynamic-snap-point-managers.md) — Handles snap points that change dynamically after the bottom sheet is mounted. ([source](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md))
- [Dynamic Snap Point Recalculations](https://awesome-repositories.com/f/user-interface-experience/snap-points/dynamic-snap-point-recalculations.md) — Provides dynamic snap point recalculation when content size or keyboard visibility changes.
- [Gesture-Driven Snap Animations](https://awesome-repositories.com/f/user-interface-experience/snap-points/gesture-driven-snap-animations.md) — Moves the sheet between predefined vertical positions with smooth gesture-driven transitions. ([source](https://gorhom.dev/react-native-bottom-sheet/blog))
- [Bottom Sheet Content Resizers](https://awesome-repositories.com/f/user-interface-experience/tables/column-reorderers/table-column-synchronizers/automatic-content-sizing/bottom-sheet-content-resizers.md) — Automatically resizes the bottom sheet height to match its content without requiring fixed snap points. ([source](https://gorhom.dev/react-native-bottom-sheet/dynamic-sizing))
- [Pan Down to Close](https://awesome-repositories.com/f/user-interface-experience/toast-notifications/swipe-to-dismiss-gestures/pan-down-to-close.md) — Closes the sheet with a single downward pan gesture. ([source](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md))
- [Animation Configuration](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration.md) — Applies spring or timing animation curves to sheet movements for tailored motion. ([source](https://gorhom.dev/react-native-bottom-sheet/props))
- [Programmatic Controls](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/programmatic-controls.md) — Exposes methods and animated values for direct programmatic control of the sheet. ([source](https://gorhom.dev/react-native-bottom-sheet/hooks))
- [Stack Navigator Embeddings](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/stack-navigator-embeddings.md) — Embeds a stack navigator inside a bottom sheet for multi-screen flows. ([source](https://gorhom.dev/react-native-bottom-sheet/react-navigation-integration))
- [Virtualized List Integrations](https://awesome-repositories.com/f/user-interface-experience/component-pre-rendering-systems/virtualized-list-integrations.md) — Renders a performant virtualized list component that works seamlessly inside the sheet. ([source](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md))
- [Isolated](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles/isolated.md) — Provides drag handles that move the sheet without scrolling content inside. ([source](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md))
- [Cross-Platform Keyboard Event Trackers](https://awesome-repositories.com/f/user-interface-experience/interface-element-management/keyed-element-tracking/keyboard-event-listeners/ios-keyboard-event-trackers/cross-platform-keyboard-event-trackers.md) — Tracks keyboard events on iOS and Android to adjust sheet position. ([source](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md))
- [Pull-to-Refresh Components](https://awesome-repositories.com/f/user-interface-experience/pull-to-refresh-components.md) — Enables standard pull-to-refresh gesture on scrollable content inside the sheet. ([source](https://cdn.jsdelivr.net/gh/gorhom/react-native-bottom-sheet@master/README.md))
- [Pull-to-Refresh Inside Sheets](https://awesome-repositories.com/f/user-interface-experience/pull-to-refresh-components/pull-to-refresh-inside-sheets.md) — Triggers a refresh action when users pull down on scrollable content inside the sheet. ([source](https://gorhom.dev/react-native-bottom-sheet))
- [Over-Drag](https://awesome-repositories.com/f/user-interface-experience/scrollable-containers/over-drag.md) — Over-drags the sheet even when a scrollable view is at its boundary. ([source](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md))
- [Custom Position Snappers](https://awesome-repositories.com/f/user-interface-experience/snap-points/custom-position-snappers.md) — Moves the bottom sheet to a custom vertical position that may not be one of the predefined snap points. ([source](https://gorhom.dev/react-native-bottom-sheet/methods))
- [Snap Point Index Navigators](https://awesome-repositories.com/f/user-interface-experience/snap-points/snap-point-index-navigators.md) — Provides programmatic control to collapse the bottom sheet to its minimum height snap point. ([source](https://gorhom.dev/react-native-bottom-sheet/methods))
- [Force Close Animations](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/close-buttons/force-close-animations.md) — Provides a forced close animation that completes without interruption. ([source](https://gorhom.dev/react-native-bottom-sheet/methods))

### Graphics & Multimedia

- [Gesture-Driven Snap Animations](https://awesome-repositories.com/f/graphics-multimedia/custom-animation-effects/interactive-gesture-driven-animations/gesture-driven-snap-animations.md) — Implements gesture-driven snap animations between predefined vertical positions with velocity thresholds.

### Mobile Development

- [Sheet Gesture Controls](https://awesome-repositories.com/f/mobile-development/mobile-gesture-interactions/sheet-gesture-controls.md) — Implements touch-based drag gestures to control sheet position, snapping, and dismissal.
- [Bottom Sheet Screen Presentations](https://awesome-repositories.com/f/mobile-development/navigation-routing/navigators/bottom-sheet-screen-presentations.md) — Presents bottom sheets as navigable screens in a React Navigation stack. ([source](https://gorhom.dev/react-native-bottom-sheet/v2))
- [Bottom Sheet Screen Presentations](https://awesome-repositories.com/f/mobile-development/react-native-navigation-frameworks/bottom-sheet-screen-presentations.md) — Integrates bottom sheets as standard screens or modals in React Navigation. ([source](https://gorhom.dev/react-native-bottom-sheet/v4))
- [Bottom Sheet Scroll Integrations](https://awesome-repositories.com/f/mobile-development/scroll-view-interaction-libraries/bottom-sheet-scroll-integrations.md) — Supports native scrolling for FlatList, SectionList, ScrollView, and views in the sheet. ([source](https://gorhom.dev/react-native-bottom-sheet/v4))

### Software Engineering & Architecture

- [Bottom Sheet Content Resizers](https://awesome-repositories.com/f/software-engineering-architecture/automatic-configuration/automatic-layout-engines/content-driven-sizing/bottom-sheet-content-resizers.md) — Automatically adjusts the bottom sheet height to fit the dynamic size of its content. ([source](https://gorhom.dev/react-native-bottom-sheet))

### Part of an Awesome List

- [Accessibility Motion Overrides](https://awesome-repositories.com/f/awesome-lists/devtools/animations-and-motion/accessibility-motion-overrides.md) — Disables or forces sheet animations based on the device's reduce-motion accessibility setting. ([source](https://gorhom.dev/react-native-bottom-sheet/props))
- [Keyboard Occlusion Prevention](https://awesome-repositories.com/f/awesome-lists/devtools/keyboard-input/keyboard-occlusion-prevention.md) — Automatically adjusts sheet position to prevent keyboard occlusion. ([source](https://gorhom.dev/react-native-bottom-sheet/v4))
- [Keyboard-Aware Text Inputs](https://awesome-repositories.com/f/awesome-lists/devtools/keyboard-input/keyboard-occlusion-prevention/keyboard-aware-scroll-views/keyboard-aware-text-inputs.md) — Provides a text input that adjusts the sheet position when the keyboard appears. ([source](https://gorhom.dev/react-native-bottom-sheet/keyboard-handling))
- [Keyboard Management](https://awesome-repositories.com/f/awesome-lists/devtools/keyboard-management.md) — Shifts sheet content above the keyboard without manual offset calculations. ([source](https://gorhom.dev/react-native-bottom-sheet))

### Development Tools & Productivity

- [Keyboard Event Response Configurations](https://awesome-repositories.com/f/development-tools-productivity/keyboard-interaction-controls/keyboard-event-response-configurations.md) — Configures bottom sheet behavior in response to keyboard events via props. ([source](https://gorhom.dev/react-native-bottom-sheet/keyboard-handling))

### Web Development

- [Cross-Platform Rendering](https://awesome-repositories.com/f/web-development/cross-platform-rendering.md) — Renders bottom sheets on web mobile platforms using the same API without code changes. ([source](https://gorhom.dev/react-native-bottom-sheet/web-support))
- [Gesture Handler Overrides](https://awesome-repositories.com/f/web-development/gesture-handling/gesture-handler-overrides.md) — Ships gesture handler overrides for custom pan and scroll interactions. ([source](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md))