Props
Configuration
index
Initial snap index. You also could provide -1
to initiate bottom sheet in closed state.
type | default | required |
---|---|---|
number | 0 | NO |
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.
type | required |
---|---|
Array<number|string> | YES |
String values should be a percentage.
examples
snapPoints={[200, 500]}
snapPoints={[200, '50%']}
snapPoints={[-1, '100%']}
enableContentPanningGesture
Enable content panning gesture interaction.
type | default | required |
---|---|---|
boolean | true | NO |
enableHandlePanningGesture
Enable handle panning gesture interaction.
type | default | required |
---|---|---|
boolean | true | NO |
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.
type | default | required |
---|---|---|
boolean | false | NO |
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.
type | default | required |
---|---|---|
ViewStyle | AnimatedStyle | undefined | NO |
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.
type | default | required |
---|---|---|
number | 24 | NO |
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.
type | default | required |
---|---|---|
number | 0 | NO |
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
.
type | default | required |
---|---|---|
number | 0 | NO |