Bottom Action Sheet

Property
Type
Default
Description
options
Array<string>
-
Array of selectable options when the sheet appears
ios
{
  destructiveButtonIndex?: number;
} | undefined
{
  height: 24,
  width: 24,
  resizeMode: 'contain',
}
iOS properties for setting the destructiveButtonIndex
cancelButtonIndex
number | undefined
-
The index of the dismiss button
android
{
  minClosingHeight?: number;
  duration?: number;
  onClose: (() => void) | null;
  closeOnDragDown?: boolean;
  closeOnPressMask?: boolean;
  closeOnPressBack?: boolean;
  closeOnButtonPress?: boolean;
  animationType?:
    'none'
    | 'slide'
    | 'fade'
    | undefined;
  customStyles?: CustomStyle;
} | undefined
{
  animationType: 'none',
  minClosingHeight: 0,
  duration: 300,
  closeOnDragDown: true,
  closeOnPressMask: true,
  closeOnPressBack: true,
  closeOnButtonPress: true,
  customStyles: {},
  onClose: null,
}
Android specific properties.
onPressWithIndex
(buttonIndex: number) => void
-
The event for presses by index

Example

    let bottomActionSheet: BottomActionSheet;
    <Button
      onPress={() => {
        bottomActionSheet.openSheet();
      }}
      title="Open"
    />
    <BottomActionSheet
      ref={(ref) => {
        bottomActionSheet = ref;
      }}
      options={['OK', 'Cancel']}
      cancelButtonIndex={1}
      onPressWithIndex={(index) => {
        if (Platform.OS === 'android' && index === 0) {
          bottomActionSheet.closeSheet();
        }
      }}
    />