BottomSheet | Modal

Import

import BottomSheet from '@/components/shared/bottomsheet/BottomSheet';

---

Props

Prop	Type	Default	Description
children	React.ReactNode	Required	The content to render inside the bottom sheet.
height	number	350	Height of the bottom sheet (ignored if fullHeight is true).
title	string	'Choose Option'	Optional title shown at the top of the bottom sheet.
bottomSheetRef	Ref<RBSheetRef>	Required	Ref object used to control the bottom sheet externally.
closeOnPressMask	boolean	true	If true, tapping outside the sheet will close it.
closeAction	() => void	-	Callback fired when the close icon is pressed.
fullHeight	boolean	false	If true, expands the bottom sheet to (screen height - 60).
containerStyle	StyleProps	-	Optional custom style for the bottom sheet container.
childContainerStyle	StyleProps	-	Optional style applied to the children container inside the sheet.

---

Usage Examples

Usage Examples

Basic Usage

<BottomSheet
    bottomSheetRef={bottomSheetRef}
>
    <Text>Sheet content here</Text>
</BottomSheet>

With Title and Close Action

<BottomSheet
    title="Select Item"
    bottomSheetRef={bottomSheetRef}
    closeAction={() => console.log('Closed')}
>
    <Text>List of options</Text>
</BottomSheet>

Full Height Sheet

<BottomSheet
    fullHeight
    bottomSheetRef={bottomSheetRef}
>
    <Text>Full screen modal content</Text>
</BottomSheet>

---

NOTE: All example can be founded in modal_bottomSheet.tsx