BNA

BNA UI
...

BottomSheet

PreviousNext

A modal sheet component that slides up from the bottom with gesture support and snap points.

Installation

pnpm dlx bna-ui add bottom-sheet

Usage

import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
function MyComponent() {
  const { isVisible, open, close } = useBottomSheet();
 
  return (
    <>
      <Button onPress={open}>Open Bottom Sheet</Button>
 
      <BottomSheet
        isVisible={isVisible}
        onClose={close}
        title='Settings'
        snapPoints={[0.3, 0.6, 0.9]}
      >
        <Text>Your content here</Text>
      </BottomSheet>
    </>
  );
}

Examples

Default

With Title

Custom Snap Points

Form Content

List Content

No Backdrop Dismiss

Custom Styling

Menu Options

API Reference

BottomSheet

The main bottom sheet component that provides a modal interface sliding from the bottom.

PropTypeDefaultDescription
isVisibleboolean-Controls the visibility of the bottom sheet.
onClosefunction-Callback function called when the sheet is closed.
childrenReactNode-The content to display inside the bottom sheet.
snapPointsnumber[][0.3, 0.6, 0.9]Array of snap points as percentages of screen height.
enableBackdropDismissbooleantrueWhether tapping the backdrop should dismiss the sheet.
titlestring-Optional title to display at the top of the sheet.
styleViewStyle-Additional styles to apply to the bottom sheet container.

useBottomSheet Hook

A custom hook that provides state management for the bottom sheet.

const { isVisible, open, close, toggle } = useBottomSheet();

Returns

PropertyTypeDescription
isVisiblebooleanCurrent visibility state of the sheet.
openfunctionFunction to open the bottom sheet.
closefunctionFunction to close the bottom sheet.
togglefunctionFunction to toggle the sheet visibility.

Gesture Support

The BottomSheet component includes built-in gesture support:

  • Pan Gesture: Drag the sheet up and down to resize
  • Snap Points: The sheet will snap to predefined heights
  • Velocity Detection: Fast downward swipes will close the sheet
  • Boundary Limits: Prevents dragging beyond defined limits

Snap Points

Snap points define the available heights for the bottom sheet as percentages of screen height:

  • 0.3 = 30% of screen height
  • 0.6 = 60% of screen height
  • 0.9 = 90% of screen height

The sheet will automatically snap to the nearest point when gestures end.

Animation

The component uses React Native Reanimated for smooth animations:

  • Spring Animation: Natural feeling spring animations for opening/closing
  • Gesture Responsiveness: Real-time tracking of pan gestures
  • Backdrop Fade: Smooth opacity transitions for the backdrop

Accessibility

The BottomSheet component includes accessibility features:

  • Modal Semantics: Proper modal behavior for screen readers
  • Focus Management: Traps focus within the sheet when open
  • Gesture Alternatives: Provides non-gesture ways to interact
  • Backdrop Dismiss: Can be disabled for better accessibility control

Best Practices

  1. Content Height: Ensure your content works well with different snap points
  2. Backdrop Dismiss: Consider disabling for critical actions
  3. Loading States: Show loading indicators for async content
  4. Error Handling: Provide clear error states within the sheet
  5. Keyboard Handling: Account for keyboard appearance with form content
BadgeButton