ActionSheet props

id

A unique id for the action sheet that is required to present it from anywhere in the app using the SheetManager.

Type	Required
id	false

ref

Set this ref if you need to use ActionSheetRef methods.

Type	Required
ref	false

testIDs

An object containing test ids for various views in the actionSheet.

modal: 'Test id for the modal'

root: Test id for the root container when isModal is set to false.

backdrop: Test id for the backdrop. Can be used to close the action sheet in e2e tests.

sheet: Test id for the container that wraps all your components inside the sheet.

Type	Required
object	no

animated

Disable all animations

Type	Required
boolean	no

Default: true

gestureEnabled

Controls whether the gestures should be enabled on the action sheet.

Type	Required
boolean	no

Default: false

isModal

Setting this to false will make the action sheet use an absolute positioned View as a container. This is automatically enabled when background interaction is enabled.

Type	Required
boolean	no

default:true

zIndex

The default zIndex of wrapper View when isModal is set to false or background interaction is enabled is 9999. You can change it here.

Type	Required
number	no

default:9999

returnValue

Since SheetManager.show is now an async function that resolves when the action sheet closed, you can return some data to the caller by setting this prop. When the Sheet closes the promise will resolve with the data.

Type	Required
any	no

backgroundInteractionEnabled

Enable background interation. This way the user will be able to interact with the UI elements in background of the action sheet when it is opened.

Type	Required
boolean	no

Default: false

snapPoints

Provide snap points ranging from 0 to 100. ActionSheet will snap between these points. If no snap points are provided, the default is a single snap point set to 100 which means that the sheet will be opened 100% on becoming visible.

Note. snapPoints are relative to the height of the content inside ActionSheet. 100 = All content visible and 50 = half of the content is visible.

Type	Required
number[]	no

Default: [100]

initialSnapIndex

When you have set the snapPoints prop. You can use this prop to set the inital snap point for the sheet. For example if i have snap points set to [30,60,100] then setting this prop to 1 would mean the action sheet will snap to 60% on becoming visible.

Type	Required
number	no

Default: 0

indicatorStyle

The top indicator bar on the action sheet is a regular View component and can be styles as such.

Type	Required
StyleProp<ViewStyle>	no

containerStyle

Style the main container in the action sheet that wraps your content.

Note: You can set most styles here except maxHeight, marginBottom and paddingBottom. These are used internally. You can do this instead:

<ActionSheet>
  <View
    style={{
      paddingBottom: 50,
    }}
  />
</ActionSheet>

Type	Required
StyleProp<ViewStyle>	no

openAnimationConfig

Modify the animation when the sheet opens.

Type	Required
Animated.SpringAnimationConfig	no

closeAnimationConfig

Modify the animation when the sheet closes.

Type	Required
Animated.SpringAnimationConfig	no

CustomHeaderComponent

A custom header component if any that replaces the default indicator bar on top.

Type	Required
React. ReactNode	no

ExtraOverlayComponent

Render a component that is absolutely positioned over the action sheet. This is useful for rendering toasts & in-app notifications.

Type	Required
React. ReactNode	no

keyboardHandlerEnabled

The action sheet uses it's own keyboard handling. Set this prop to false to disable it if needed.

Type	Required
boolean	no

headerAlwaysVisible

By default when the gesturesEnabled prop is set to false, the top indicator bar or any custom header component is hidden. Set this to true to keep the header always visible.

Type	Required
boolean	no

Default: false

closeOnTouchBackdrop

Should the action sheet close when touching the backdrop area above the action sheet.

Type	Required
boolean	no

Default: true

springOffset

Choose how far off the user needs to drag the action sheet to make it snap to next point. The default is 50 which means that user needs to drag the sheet up or down at least 50 display pixels for it to close or move to next snap point. Otherwise it will just return to the initial position.

Type	Required
number	no

Default: 50

elevation

Set elevation to the ActionSheet container.

Type	Required
number	no

Default: 5

overlayColor

Color of the overlay/backdrop.

Type	Required
string	no

Default: "black"

defaultOverlayOpacity

Default opacity of the overlay/backdrop.

Type	Required
number 0 - 1	no

Default: 0.3

closable

Controls whether the sheet can be dismissed. When set to false, the sheet cannot be closed by swiping down or tapping the backdrop — instead it snaps back to its minimum snap point and stays open. See also disableDragBeyondMinimumSnapPoint.

Type	Required
boolean	no

Default: true

statusBarTranslucent

Determine whether the modal should go under the system statusbar.

Type	Required
boolean	no

Default: true

closeOnPressBack

Will the ActionSheet close on hardwareBackPress event.

Type	Required
boolean	no

Default: true

drawUnderStatusBar

Draw action sheet container under the status bar.

Type	Required
boolean	no

Default: false

overdrawEnabled

When the action sheet is pulled beyond top position, it overdraws and bounces back. Set this to false if you need to disable this behaviour.

Type	Required
boolean	no

Default: true

overdrawFactor

Set how quickly the sheet will overdraw on pulling beyond top position. A lower value means faster overdraw.

Type	Required
number	no

Default: 15

overdrawSize

Set the height of the overdraw View. If you set the overdrawFactor to a lower value, you should increase the size of the overdraw to prevent the action sheet from showing background views etc.

Type	Required
number	no

Default: 100

useBottomSafeAreaPadding

Apply padding to bottom based on device safe area insets.

Type	Required
boolean	no

Default: true

withNestedSheetProvider

If any of the action sheets in a nested SheetProvider is not a modal, i.e uses isModal={false} then you must define the provider with this prop. This allows the action sheet to be rendered correctly in fullscreen.

Type	Required
React.ReactNode	no

onChange(positon:number)

A function that is called whenever the action sheet moves with the current position. When the position value is 100 it means the action sheet has reached top.

Type	Required
function	no

onClose

A function called when the action sheet closes

Type	Required
function	no

onOpen

A function called when the action sheet opens.

Type	Required
function	no

onBeforeShow(data:any)

A function called just before the action sheet is ready to be shown.

Type	Required
function	no

onBeforeClose(data:any)

A function called just before the action sheet is closing.

Type	Required
function	no

routes

A list of routes for this actions sheet if any.

Type	Required
Route[]	no

onNavigate(route: string)

An event called when navigating to a route in stack

Type	Required
function	no

onNavigateBack(route: string)

Type	Required
function	no

An event called when navigating back in stack.

initialRoute

Initial route to navigate to when the sheet opens.

Type	Required
string	no

enableRouterBackNavigation

Enable back navigation for router when pressing hardware back button or touching the back drop. Remember that swiping down the sheet will still close the sheet regardless of the route in stack.

Type	Required
boolean	no

backdropProps

An object containing props for the backdrop layer. Used to provide accessibility props.

Type	Required
object	no

onTouchBackdrop

A callback that gets invoked when user taps on the backdrop area.

Type	Required
function	no

safeAreaInsets

Default safeArea insets provided through a library such as react-native-safe-area-insets. This also helps in giving a tiny boost in performance as the sheet does not have to calculate insets anymore.

Type	Required
object	no

enableGesturesInScrollView

Enable swipe gestures inside ScrollView/FlatList. Enabled by default.

Type	Required
boolean	no

onSnapIndexChange

Callback invoked when the snap position of the sheet changes.

Type	Required
function	no

initialTranslateFactor

Set the initial translate factor of the action sheet when it opens. Default is 1 which means the action sheet will open from bottom of the screen. You can set it to 0.5 to have it open from half way of the screen.

Type	Required
number	no

Default: 1

disableElevation

Disable elevation/shadow of the action sheet.

Type	Required
boolean	no

experimentalWorkletGestures

The worklet-driven gesture engine. When enabled, the drag gesture and scroll ↔ drag arbitration run entirely on the UI thread, so a busy JS thread no longer stutters the sheet and scroll handoff is more reliable. Enabled by default on all platforms.

Requires the sheet's own ScrollView/FlatList (from this package) for scrolling content. Set to false (or use legacyGestures) to fall back to the pre-v11 gesture path.

Type	Required
boolean	no

Default: true

legacyGestures

Force the legacy (pre-v11) PanResponder/JS gesture engine instead of the worklet engine. An escape hatch in case the worklet path misbehaves for a specific use case.

Deprecated. The legacy gesture path will be removed in v11. Please report any issue that requires this flag.

Type	Required
boolean	no

Default: false

dimBackdropOnDrag

Fade the backdrop out progressively as the sheet is dragged down below its lowest snap point toward dismissal (native feel). The backdrop stays fully opaque at every snap point. Set to false to keep a constant backdrop while dragging.

Type	Required
boolean	no

Default: true

disableDragBeyondMinimumSnapPoint

When closable={false}, set this to true to prevent the sheet from being dragged below its minimum snap point position.

Type	Required
boolean	no

onChangeWorklet(position: number)

A worklet version of onChange. Runs on the UI thread on every integer percentage change without any JS-thread hop. Useful for driving companion animations (backdrop blur, header collapse) in sync with the sheet. The function passed here must be a worklet.

<ActionSheet
  onChangeWorklet={(position) => {
    'worklet';
    myShared.value = position;
  }}
/>

Type	Required
function	no

accessibilityLabels

Accessibility labels for the sheet's built-in controls (used by screen readers).

• backdrop: Label for the backdrop button (activating it closes the sheet). Default: "Close".
• grabber: Label for the drag handle / grabber. When there are multiple snap points the grabber is exposed as an adjustable element so screen-reader users can swipe up or down to change the sheet's position. Default: "Sheet position".

<ActionSheet
  accessibilityLabels={{backdrop: 'Close', grabber: 'Sheet position'}}
/>

Type	Required
object	no

onRequestClose

Called when the ActionSheet is closing based on some user actions:

Touching backdrop System back navigation Swiping down to close the ActionSheet

Return false to cancel closing the ActionSheet.

Type	Required
(type: CloseRequestType) => boolean	no

CloseRequestType is exported from the package root:

import {CloseRequestType} from 'react-native-actions-sheet';

// CloseRequestType.SWIPE | CloseRequestType.BACK_PRESS | CloseRequestType.TOUCH_BACKDROP