# nysamnang/react-native-raw-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/nysamnang-react-native-raw-bottom-sheet).**

1,204 stars · 194 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/nysamnang/react-native-raw-bottom-sheet
- Homepage: https://npmjs.com/package/react-native-raw-bottom-sheet
- awesome-repositories: https://awesome-repositories.com/repository/nysamnang-react-native-raw-bottom-sheet.md

## Topics

`action-sheet` `bottom-animated` `bottom-drawer` `bottom-sheet` `modal` `picker` `raw-bottom-sheet` `react-native`

## Description

React Native Raw Bottom Sheet is a cross-platform mobile UI component that renders custom sliding modal panels and action menus rising from the bottom of the screen. It provides a native application interface overlay designed for mobile app development to display custom content, menus, and forms.

The component supports customizable sheet behavior, allowing developers to configure animation durations, custom dimensions, and visual styling for the root backdrop, container view, and draggable handles. Dismissal and interaction mechanics include backdrop mask interception, downward drag gestures, hardware back button integration, and programmatic state control through reference methods.

## Tags

### Mobile Development

- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Provides customizable mobile UI components and action menus that slide up from the bottom of the screen.
- [Cross-Platform App Development](https://awesome-repositories.com/f/mobile-development/cross-platform-app-development.md) — Builds mobile apps that run on iOS and Android from one codebase with shared business logic and platform-tailored UI.
- [Sheet Gesture Controls](https://awesome-repositories.com/f/mobile-development/mobile-gesture-interactions/sheet-gesture-controls.md) — Dismisses bottom sheets through tap-outside masks, hardware back buttons, and drag-down touch gestures on handles or content. ([source](https://github.com/nysamnang/react-native-raw-bottom-sheet#readme))

### User Interface & Experience

- [Bottom Sheet Modal Presentations](https://awesome-repositories.com/f/user-interface-experience/modal-overlays/bottom-sheet-modal-presentations.md) — Displays customizable sliding modal panels from the bottom of the screen with support for custom height, styling, and content. ([source](https://github.com/nysamnang/react-native-raw-bottom-sheet#readme))
- [React Native Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-transitions/react-libraries/cross-platform-ui-libraries/cross-platform-ui-component-libraries/react-native-component-libraries.md) — Builds mobile application interfaces using React Native with custom components that integrate into cross-platform UI component libraries.
- [Mobile Bottom Sheets](https://awesome-repositories.com/f/user-interface-experience/layout-and-anchoring-systems/sliding-panels/mobile-bottom-sheets.md) — Displays sliding modal panels and action menus from the bottom of the screen in mobile applications for user selections and forms.
- [Native Animation Interpolators](https://awesome-repositories.com/f/user-interface-experience/native-animation-drivers/native-animation-interpolators.md) — Drives smooth layout transitions and drag movements entirely on the native UI thread using interpolated node values.
- [Bottom Sheet Modal Presentations](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays/bottom-sheet-modal-presentations.md) — Customizes animation durations, backdrop dismissals, hardware back button handling, and drag gestures to control menu states. ([source](https://github.com/nysamnang/react-native-raw-bottom-sheet/blob/master/README.md))
- [Pan Gesture Detections](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-detection/pan-gesture-detections.md) — Tracks touch movements and velocity to handle downward dragging interactions and calculate natural dismissal thresholds.
- [Programmatic Controls](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets/programmatic-controls.md) — Opens and closes overlay panels dynamically using reference methods triggered from parent component logic or user interactions. ([source](https://npmjs.com/package/react-native-raw-bottom-sheet))
- [Gesture-Based Dismissal](https://awesome-repositories.com/f/user-interface-experience/drawers/gesture-based-dismissal.md) — Dismisses overlay panels through backdrop taps, hardware back button presses, or downward drag gestures with customizable behavior. ([source](https://npmjs.com/package/react-native-raw-bottom-sheet))
- [Modal Sheet Presentations](https://awesome-repositories.com/f/user-interface-experience/modal-overlays/modal-sheet-presentations.md) — Renders overlay panels in a separate application window layer above standard views to guarantee full-screen coverage.
- [State Transition Animators](https://awesome-repositories.com/f/user-interface-experience/overlay-transition-animations/state-transition-animators.md) — Controls open and close animations using adjustable durations and native driver acceleration to ensure smooth visual movement. ([source](https://github.com/nysamnang/react-native-raw-bottom-sheet#readme))
- [Imperative Method Exposure](https://awesome-repositories.com/f/user-interface-experience/parent-to-child-data-flows/imperative-method-exposure.md) — Exposes direct open and close methods to parent components through standard component reference forwarding patterns.
- [Component Style Sheets](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/cascading-style-sheets/component-style-sheets.md) — Applies custom visual styling to the root backdrop, container view, and draggable handle to match design systems. ([source](https://github.com/nysamnang/react-native-raw-bottom-sheet/blob/master/README.md))