Repolode
Submit
ammarahm-ed

ammarahm-ed/react-native-actions-sheet

A cross-platform React Native action sheet (bottom sheet) component for Android, iOS and Web with a flexible API for custom content.

View on GitHubWebsite
Stars
2,195
Forks
158
Open issues
45
Last commit
2 days ago

What is it?

react-native-actions-sheet is a React Native component that renders a bottom sheet, often used for action menus, pickers and drawers. It runs on Android, iOS and Web, and you can place arbitrary React content inside the sheet.

The library builds on react-native-reanimated, react-native-worklets, react-native-gesture-handler and react-native-safe-area-context. Gestures, scroll handling and animations run on the UI thread, so a busy JavaScript thread does not stall the sheet. Version 11 requires React Native's New Architecture; apps still on the legacy architecture are directed to stay on version 10.

It offers multiple snap points, flick-to-dismiss based on release velocity, multiple scrollable areas within one sheet, and a SheetGestureBlocker for sliders, maps and WebViews. An official Jest mock is also provided for testing.

Key features

  • 01Works on Android, iOS and Web from one codebase.
  • 02Renders arbitrary React content inside the sheet.
  • 03Gestures and animations run on the UI thread.
  • 04Supports multiple snap points and flick-to-dismiss.
  • 05Includes a gesture blocker for sliders, maps and WebViews.
  • 06Ships an official Jest mock for testing.

Use cases

  • Showing an action menu or context menu from a bottom sheet in a React Native app.
  • Building a picker or selection panel that slides up from the bottom.
  • Embedding forms or scrollable lists in a draggable drawer on mobile or web.

Quick start

  1. 1

    Install the library

    npm install react-native-actions-sheet
  2. 2

    Install required peer dependencies

    npm install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context
  3. 3

    Follow the installation guide in the docs for setup details

Things to know

  • Version 11 requires React Native's New Architecture; legacy-architecture apps must stay on version 10.
  • Depends on several native libraries (reanimated, worklets, gesture-handler, safe-area-context) that must also be installed.

Topics

#react-native#bottom-sheet#action-sheet#ui-component#cross-platform#expo#typescript#action#actionsheet#bottom-app-bar

FAQ

What is react-native-actions-sheet?
A cross-platform React Native action sheet (bottom sheet) component for Android, iOS and Web with a flexible API for custom content. react-native-actions-sheet is a React Native component that renders a bottom sheet, often used for action menus, pickers and drawers. It runs on Android, iOS and Web, and you can place arbitrary React content inside the sheet.
Is react-native-actions-sheet free to use? What license does it have?
react-native-actions-sheet is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-native-actions-sheet still maintained?
Actively maintained. The last commit to react-native-actions-sheet was on Oct 18, 2026.
What can I use react-native-actions-sheet for?
Showing an action menu or context menu from a bottom sheet in a React Native app. Building a picker or selection panel that slides up from the bottom. Embedding forms or scrollable lists in a draggable drawer on mobile or web.
How do I install react-native-actions-sheet?
Install the library: npm install react-native-actions-sheet Install required peer dependencies: npm install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context Follow the installation guide in the docs for setup details
Where can I get react-native-actions-sheet?
The source code and installation instructions are on GitHub: https://github.com/ammarahm-ed/react-native-actions-sheet

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects