Reference
ActionSheet props

ActionSheet props

id

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

TypeRequired
idfalse

ref

Set this ref if you need to use ActionSheetRef methods.

TypeRequired
reffalse

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.

TypeRequired
objectno

animated

Disable all animations

TypeRequired
booleanno

Default: true

gestureEnabled

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

TypeRequired
booleanno

Default: true

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.

TypeRequired
booleanno

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.

TypeRequired
numberno

default:9999

payload

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.

TypeRequired
anyno

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.

TypeRequired
booleanno

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.

TypeRequired
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.

TypeRequired
number[]no

Default: 0

indicatorStyle

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

TypeRequired
ViewStyleno

containerStyle

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

TypeRequired
Objectno

openAnimationConfig

Modify the animation when the sheet opens.

TypeRequired
Animated.SpringAnimationConfigno

closeAnimationConfig

Modify the animation when the sheet closes.

TypeRequired
Animated.SpringAnimationConfigno

CustomHeaderComponent

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

TypeRequired
React. ReactNodeno

ExtraOverlayComponent

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

TypeRequired
React. ReactNodeno

keyboardHandlerEnabled

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

TypeRequired
booleanno

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.

TypeRequired
booleanno

Default: false

closeOnTouchBackdrop

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

TypeRequired
booleanno

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.

TypeRequired
numberno

Default: 50

elevation

Set elevation to the ActionSheet container.

TypeRequired
numberno

Default: 5

overlayColor

Color of the overlay/backdrop.

TypeRequired
stringno

Default: "black"

defaultOverlayOpacity

Default opacity of the overlay/backdrop.

TypeRequired
number 0 - 1no

Default: 0.3

closable

This will make sure that the action sheet remains open always after opened first time.

TypeRequired
booleanno

Default: true

statusBarTranslucent

Determine whether the modal should go under the system statusbar.

TypeRequired
booleanno

Default: true

closeOnPressBack

Will the ActionSheet close on hardwareBackPress event.

TypeRequired
booleanno

Default: true

drawUnderStatusBar

Draw action sheet container under the status bar.

TypeRequired
booleanno

Default: true

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.

TypeRequired
booleanno

Default: true

overdrawFactor

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

TypeRequired
numberno

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.

TypeRequired
numberno

Default: 100

useBottomSafeAreaPadding

Apply padding to bottom based on device safe area insets.

TypeRequired
booleanno

Default: false

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.

TypeRequired
React.ReactNodeno

onChange(positon:number, height:number)

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

TypeRequired
functionno

onClose

A function called when the action sheet closes

TypeRequired
functionno

onOpen

A function called when the action sheet opens.

TypeRequired
functionno

onBeforeShow(data:any)

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

TypeRequired
functionno

onBeforeClose(data:any)

A function called just before the action sheet is closing.

TypeRequired
functionno

routes

A list of routes for this actions sheet if any.

TypeRequired
Route[]no

onNavigate(route: string)

An event called when navigating to a route in stack

TypeRequired
functionno

onNavigateBack(route: string)

TypeRequired
functionno

An event called when navigating back in stack.

initialRoute

Initial route to navigate to when the sheet opens.

TypeRequired
stringno

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.

TypeRequired
booleanno

backdropProps

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

TypeRequired
objectno
Last updated on February 13, 2023