Skip to main content
Version: v5

Props

Configuration

index

Initial snap index. You also could provide -1 to initiate bottom sheet in closed state.

typedefaultrequired
number0NO

snapPoints

Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix.

typerequired
Array<number|string> | SharedValue<Array<string | number>>YES*
caution

This prop is required unless you set enableDynamicSizing to true.

caution

String values should be a percentage.

examples

snapPoints={[200, 500]}
snapPoints={[200, '50%']}
snapPoints={['100%']}

overDragResistanceFactor

Defines how violently sheet has to be stopped while over dragging.

typedefaultrequired
number2.5NO

detached

Defines whether the bottom sheet is attached to the bottom or no.

typedefaultrequired
booleanfalseNO

enableContentPanningGesture

Enable content panning gesture interaction.

typedefaultrequired
booleantrueNO

enableHandlePanningGesture

Enable handle panning gesture interaction.

typedefaultrequired
booleantrueNO

enableOverDrag

Enable over drag for the sheet.

typedefaultrequired
booleantrueNO

enablePanDownToClose

Enable pan down gesture to close the sheet.

typedefaultrequired
booleanfalseNO

enableDynamicSizing

Enable dynamic sizing for content view and scrollable content size.

typedefaultrequired
booleanfalseNO
caution

Setting this prop to true, will result in adding a new snap point to the provided snap points and will be sorted accordingly, and this might effect the indexing, for example, if provided snap points are [100, 1000], and the content size is 500 then the final snap points will be [100, 500, 1000].

animateOnMount

This will initially mount the sheet closed and when it's mounted and calculated the layout, it will snap to initial snap point index.

typedefaultrequired
booleantrueNO

Styles

style

View style to be applied at the sheet container, it also could be an AnimatedStyle. This is helpful to add shadow to the sheet.

typedefaultrequired
ViewStyle | AnimatedStyleundefinedNO

backgroundStyle

View style to be applied to the background component.

typedefaultrequired
ViewStyleundefinedNO

handleStyle

View style to be applied to the handle component.

typedefaultrequired
ViewStyleundefinedNO

handleIndicatorStyle

View style to be applied to the handle indicator component.

typedefaultrequired
ViewStyleundefinedNO

Layout Configuration

handleHeight

Handle height helps to calculate the internal container and sheet layouts. If handleComponent is provided, the library internally will calculate its layout, unless handleHeight is provided too.

typedefaultrequired
number24NO

containerHeight

Container height helps to calculate the internal sheet layouts. If containerHeight not provided, the library internally will calculate it, however this will cause an extra re-rendering.

typedefaultrequired
number0NO

contentHeight

Content height helps dynamic snap points calculation.

typedefaultrequired
number | Animated.SharedValue<number>undefinedNO

containerOffset

Container offset helps to accurately detect container offsets.

typedefaultrequired
Animated.SharedValue<Insets>undefinedNO

topInset

Top inset to be added to the bottom sheet container, usually it comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea.

typedefaultrequired
number0NO

bottomInset

Bottom inset to be added to the bottom sheet container.

typedefaultrequired
number0NO

maxDynamicContentSize

Max dynamic content size height to limit the bottom sheet height from exceeding a provided size.

typedefaultrequired
numbercontainer heightNO

Keyboard Configuration

keyboardBehavior

Defines the keyboard appearance behavior.

  • extend: extend the sheet to its maximum snap point.
  • fillParent: extend the sheet to fill the parent view.
  • interactive: offset the sheet by the size of the keyboard.
typedefaultrequired
'extend' | 'fillParent' | 'interactive''interactive'NO

keyboardBlurBehavior

Defines the keyboard blur behavior.

  • none: do nothing.
  • restore: restore sheet position.
typedefaultrequired
'none' | 'restore''none'NO

android_keyboardInputMode

Defines keyboard input mode for Android only, learn more.

typedefaultrequired
'adjustPan' | 'adjustResize''adjustPan'NO

Animation Configuration

animationConfigs

Animation configs, this could be created by:

type animationConfigs = (
point: number,
velocity: number,
callback: () => void
) => number;
typedefaultrequired
functionundefinedNO

Gesture Configuration

waitFor

Read about waitFor.

typedefaultrequired
React.Ref | React.Ref[][]NO

simultaneousHandlers

Read about simultaneousHandlers.

typedefaultrequired
React.Ref | React.Ref[][]NO

activeOffsetX

Read about activeOffsetX.

typedefaultrequired
number[]undefinedNO

activeOffsetY

Read about activeOffsetY.

typedefaultrequired
number[]undefinedNO

failOffsetX

Read about failOffsetX.

typedefaultrequired
number[]undefinedNO

failOffsetY

Read about failOffsetY.

typedefaultrequired
number[]undefinedNO

gestureEventsHandlersHook

Custom hook to provide pan gesture events handler, which will allow advance and customize handling for pan gesture.

typedefaultrequired
GestureEventsHandlersHookTypeuseGestureEventsHandlersDefaultNO

warning: this is an experimental feature and the hook signature can change without a major version bump.

Animated Nodes

animatedIndex

Animated value to be used as a callback for the index node internally.

typedefaultrequired
Animated.SharedValue<number>nullNO

animatedPosition

Animated value to be used as a callback for the position node internally.

typedefaultrequired
Animated.SharedValue<number>nullNO

Callbacks

onChange

Callback when the sheet position changed.

type onChange = (index: number) => void;
typedefaultrequired
functionnullNO

onAnimate

Callback when the sheet about to animate to a new position.

type onAnimate = (fromIndex: number, toIndex: number) => void;
typedefaultrequired
functionnullNO

Components

handleComponent

Component to be placed as a sheet handle.

typedefaultrequired
React.FC\<BottomSheetHandleProps>BottomSheetHandleNO

backdropComponent

Component to be placed as a sheet backdrop, by default is set to null, however the library also provide a default implementation BottomSheetBackdrop of a backdrop but you will need to provide it manually.

typedefaultrequired
React.FC\<BottomSheetBackgroundProps>nullNO

backgroundComponent

Component to be placed as a sheet background.

typedefaultrequired
React.FC\<BottomSheetBackgroundProps>BottomSheetBackgroundNO

footerComponent

Component to be placed as a sheet footer.

typedefaultrequired
React.FC\<BottomSheetFooterProps>undefinedNO

children

Scrollable node or react node to be places as a sheet content.

typedefaultrequired
() => React.ReactNode | React.ReactNode[] | React.ReactNodenullYES