Bottom Sheet

BottomSheet displays a modal sheet sliding up from the bottom of the screen with gesture handling and snap points.

Usage

SheetExample.tsx

import React, { useRef } from 'react';
import { BottomSheet, Button, Text } from '@masumdev/rn-ui';
import type BottomSheetMethods from '@gorhom/bottom-sheet';

export function SheetExample() {
  const ref = useRef<BottomSheetMethods>(null);

  return (
    <>
      <Button onPress={() => ref.current?.expand()}>Open Sheet</Button>
      <BottomSheet ref={ref} snapPoints={['25%', '50%']}>
        <Text variant="title2">Sheet Content</Text>
      </BottomSheet>
    </>
  );
}

Props API

Prop	Type	Default	Description
snapPoints	(string | number)[]	['25%', '50%']	Snap point positions for the sheet height.
children	ReactNode	—	Content rendered inside the sheet body.