Skip to main content
Version: v2 (Reanimated v1)

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>YES
caution

String values should be a percentage.

examples

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

enableContentPanningGesture

Enable content panning gesture interaction.

typedefaultrequired
booleantrueNO

enableHandlePanningGesture

Enable handle panning gesture interaction.

typedefaultrequired
booleantrueNO

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
booleanfalseNO

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

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

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

Animation Configuration

animationDuration

Snapping animation duration.

typedefaultrequired
number500NO

animationEasing

Snapping animation easing function.

typedefaultrequired
EasingFunction@TODONO

Animated Nodes

animatedIndex

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

typedefaultrequired
AnimatedValue<number>nullNO

animatedPosition

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

typedefaultrequired
AnimatedValue<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

children

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

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