ActionSheet props

id

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

ref

Set this ref if you need to use ActionSheetRef methods.

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.

animated

Disable all animations

Default: true

gestureEnabled

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

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.

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.

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.

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.

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.

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.

Default: 0

indicatorStyle

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

containerStyle

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

openAnimationConfig

Modify the animation when the sheet opens.

closeAnimationConfig

Modify the animation when the sheet closes.

CustomHeaderComponent

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

ExtraOverlayComponent

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

keyboardHandlerEnabled

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

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.

Default: false

closeOnTouchBackdrop

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

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.

Default: 50

elevation

Set elevation to the ActionSheet container.

Default: 5

overlayColor

Color of the overlay/backdrop.

Default: "black"

defaultOverlayOpacity

Default opacity of the overlay/backdrop.

Default: 0.3

closable

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

Default: true

statusBarTranslucent

Determine whether the modal should go under the system statusbar.

Default: true

closeOnPressBack

Will the ActionSheet close on hardwareBackPress event.

Default: true

drawUnderStatusBar

Draw action sheet container under the status bar.

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.

Default: true

overdrawFactor

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

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.

Default: 100

useBottomSafeAreaPadding

Apply padding to bottom based on device safe area insets.

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.

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.

onClose

A function called when the action sheet closes

onOpen

A function called when the action sheet opens.

onBeforeShow(data:any)

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

onBeforeClose(data:any)

A function called just before the action sheet is closing.

routes

A list of routes for this actions sheet if any.

onNavigate(route: string)

An event called when navigating to a route in stack

onNavigateBack(route: string)

An event called when navigating back in stack.

initialRoute

Initial route to navigate to when the sheet opens.

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.

backdropProps

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

onTouchBackdrop

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

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.

enableGesturesInScrollView

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

onSnapIndexChange

Callback invoked when the snap position of the sheet changes.