Repository files navigation

npm install react-native-actions-sheet --save

yarn add react-native-actions-sheet

Create your ActionSheet component and register it with a unique id. Remember that you do not need to render the ActionSheet in any components.

importReactfrom"react";importActionSheet,{SheetManager,SheetProps,registerSheet,}from"react-native-actions-sheet";functionMySheet(props:SheetProps){return(<ActionSheetid={props.sheetId}><View><Text>Hello World</Text></View></ActionSheet>);}// Register your Sheet component.registerSheet("mysheet",MySheet);exportdefaultMySheet;

Create asheets.tsx orsheets.js file.

// Import all the sheets here as followsimport"mysheet.tsx";export{};

InApp.js importsheets.tsx and wrap your app inSheetProvider.

import{SheetProvider}from"react-native-actions-sheet";import"sheets.tsx";// herefunctionApp(){return(<SheetProvider>{// your app components}</SheetProvider>);}

Now you can open the ActionSheet from anywhere in the app.

SheetManager.show("mysheet");

Want to pass some data on opening the sheet or update the state?

SheetManager.show("mysheet",{value:"data"});<ActionSheetonBeforeShow={(data)=>{setData(data);}}id="helloworld_sheet">

Hiding the sheet is easy. Enable gestures or do the following.

awaitSheetManager.hide("mysheet");

Close all opened ActionSheets

SheetManager.hideAll();

You can also show the sheet without SheetProvider.

<ActionSheetid="mysheet"><View><Text>Hello World</Text></View></ActionSheet>

And then show it;

SheetManager.show("mysheet");

1. Cross Platform (iOS and Android)
2. Native Animations & Performance
3. Identical Working on Android and iOS
4. Control ActionSheet withGestures
5. Raw ActionSheet - You can Add Anything
6. Allow ActionSheet to be partially shown when opened
7. Support TextInputs
8. Coolbounce effect on open.
9. Tablets and iPads
10. Horizontal Layout
11. Nested Scrolling or Scrollable Content.
12. Virtualization Support
13. Global Sheet Manager
14. Proper resizing on Android & iOS on Keyboard show/hide.

If you are using the library in one of your projects, consider supporting with a star. It takes a lot of time and effort to keep this maintained and address issues and bugs. Thank you.

A unique id for the ActionSheet. You must set this if you are usingSheetManager.

Assigns a ref to ActionSheet component to use methods.

Test ID for unit testing

Set this to false to use a simple View instead of a Modal to show the ActionSheet.

default:true

Use if you want to show the ActionSheet Partially on Opening. **RequiresgestureEnabled=true **

Default:1

Normally when the ActionSheet is fully opened, a small portion from the bottom is hidden by default. Use this prop if you want the ActionSheet to hover over the bottom of screen and not hide a little behind it.

Default:0

Style the top indicator bar in ActionSheet.

Any custom styles for the container.

Delay draw of ActionSheet on open for android.

Default:false

Delay draw of ActionSheet on open for android time.

Default:50

Your custom header component. Using this will hide the default indicator.

Render a component over the ActionSheet. Useful for rendering Toast components with which user can interact.

Keep the header always visible even when gestures are disabled.

Default:false

Animate the opening and closing of ActionSheet.

Default:true

Speed of opening animation. Higher means the ActionSheet will open more quickly. Use it in combination withbounciness prop to have optimize the bounce/spring effect on ActionSheet open.

Default:12

Duration of closing animation.

Default:300

Enables gesture control of ActionSheet

Default:false

Control closing ActionSheet by touching on backdrop.

Default:true

Bounces the ActionSheet on open.

Default:false

How much you want the ActionSheet to bounce when it is opened.

Default:8

When touch ends and user has not moved farther from the set springOffset, the ActionSheet will return to previous position.

Default:50

Add elevation to the ActionSheet container.

Default:0

Color of the gestureEnabled Indicator.

Default:"#f0f0f0"

Color of the overlay/backdrop.

Default:"black"

Default opacity of the overlay/backdrop.

Default:0.3

Prevent ActionSheet from closing on gesture or tapping on backdrop. Instead snap it tobottomOffset location

Default:true

Snap ActionSheet to this location ifclosable is set to false. By default it will snap to the location on first open.

Default:0

Setting the keyboard persistence of theScrollView component. Should be one of "never", "always" or "handled"

Default:never

Allow to choose will content change position when keyboard is visible.This is enabled by default.

Default:true

Set how keyboard should behave on tapping the ActionSheet.

Default :"none"

Determine whether the modal should go under the system statusbar.

Default:true

Will the ActionSheet close onhardwareBackPress event.

Default:true

Allow ActionSheet to draw under the StatusBar. This is enabled by default.

Default:false

Event called when position of ActionSheet changes.

Event called when the ActionSheet closes.

An event called when the ActionSheet Opens.

Methods require you to set a ref on ActionSheet Component.

If your component includes any child ScrollView/FlatList you must attach this method to all scroll end callbacks.

<ScrollViewref={scrollViewRef}nestedScrollEnabled={true}onMomentumScrollEnd={()=>actionSheetRef.current?.handleChildScrollEnd()}.....

Opens the ActionSheet.

importActionSheetfrom"react-native-actions-sheet";importReact,{createRef}from"react";constactionSheetRef=createRef();// First create a ref on your <ActionSheet/> Component.<ActionSheetref={actionSheetRef}/>;// then later in your function to open the ActionSheet:actionSheetRef.current?.show();

Closes the ActionSheet.

importActionSheetfrom"react-native-actions-sheet";importReact,{createRef}from"react";constactionSheetRef=createRef();// First create a ref on your <ActionSheet/> Component.<ActionSheetref={actionSheetRef}/>;// then later in your function to open the ActionSheet:actionSheetRef.current?.hide();

ActionSheet can be opened or closed using its ref.

importActionSheetfrom"react-native-actions-sheet";importReact,{createRef}from"react";constactionSheetRef=createRef();// First create a ref on your <ActionSheet/> Component.<ActionSheetref={actionSheetRef}/>;// then later in your function to open the ActionSheet:actionSheetRef.current?.setModalVisible();

It's also possible to explicitly either show or hide modal.

importActionSheetfrom"react-native-actions-sheet";importReact,{createRef}from"react";constactionSheetRef=createRef();// First create a ref on your <ActionSheet/> Component.<ActionSheetref={actionSheetRef}/>;// then to show modal useactionSheetRef.current?.setModalVisible(true);// and later you may want to hide it usingactionSheetRef.current?.setModalVisible(false);

When the ActionSheet is open, you can progammatically snap it to different offsets.

importActionSheetfrom"react-native-actions-sheet";importReact,{createRef}from"react";constactionSheetRef=createRef();// First create a ref on your <ActionSheet/> Component.<ActionSheetref={actionSheetRef}/>;// snap to this location on screenactionSheetRef.current?.snapToOffset(200);actionSheetRef.current?.snapToOffset(150);actionSheetRef.current?.snapToOffset(300);

Nested scrolling on android is disabled by default. You can enable it as done below.

importActionSheetfrom"react-native-actions-sheet";constApp=()=>{constactionSheetRef=useRef();return(<ActionSheetref={actionSheetRef}><ScrollViewnestedScrollEnabled={true}onMomentumScrollEnd={()=>actionSheetRef.current?.handleChildScrollEnd()}/></ActionSheet>);};

Support it by donating or joining stargazers for this repository. ⭐️ and follow me for my next creations!