Sheet

Sheet presents custom bottom-anchored modal overlays featuring smooth Reanimated slide-up spring transitions, drag handle headers, backdrop click dismiss, glassmorphism, and haptic feedback.

Usage

SheetExample.tsx

import React, { useState } from 'react';
import { Sheet, Button, Box, Text } from '@masumdev/rn-ui';
import { SlidersHorizontal, Check } from 'lucide-react-native';

export function SheetExample() {
  const [visible, setVisible] = useState(false);
  const [glassVisible, setGlassVisible] = useState(false);

  return (
    <Box gap="md">
      <Button
        variant="filled"
        tone="primary"
        leftIcon={({ color, size }) => <SlidersHorizontal color={color} size={size} />}
        onPress={() => setVisible(true)}
      >
        Open Bottom Sheet
      </Button>

      <Button
        variant="outline"
        tone="accent"
        onPress={() => setGlassVisible(true)}
      >
        Open Glass Sheet
      </Button>

      {/* 1. Default Sheet Modal */}
      <Sheet
        visible={visible}
        onClose={() => setVisible(false)}
        title="Filter Preferences"
        description="Customize your feed preferences and content discovery settings."
      >
        <Box gap="md">
          <Text variant="bodySmall" color="textMuted">
            Select your preferred view mode and content sorting order.
          </Text>

          <Box row style={{ justifyContent: 'flex-end', gap: 8 }}>
            <Button variant="outline" tone="secondary" onPress={() => setVisible(false)}>
              Cancel
            </Button>
            <Button
              variant="filled"
              tone="primary"
              leftIcon={({ color, size }) => <Check color={color} size={size} />}
              onPress={() => setVisible(false)}
            >
              Apply Filters
            </Button>
          </Box>
        </Box>
      </Sheet>

      {/* 2. Glassmorphism Sheet Modal */}
      <Sheet
        glass
        visible={glassVisible}
        onClose={() => setGlassVisible(false)}
        title="Glassmorphism Sheet"
        description="Translucent backdrop blur styling with smooth spring motion."
      >
        <Box gap="md">
          <Text variant="bodySmall" color="textMuted">
            This bottom sheet uses glassmorphism tokens matching dark & light themes.
          </Text>
          <Button variant="filled" tone="accent" onPress={() => setGlassVisible(false)}>
            Got It
          </Button>
        </Box>
      </Sheet>
    </Box>
  );
}

Props API

Prop	Type	Default	Description
visible	boolean	false	Modal visibility state.
onClose	() => void	—	Callback triggered when backdrop is pressed or drag handle is pulled down.
title	string	—	Optional header title string.
description	string	—	Optional header subtitle description text.
glass	boolean	false	Enables translucent frosted glass background styling.
children	ReactNode	—	Sheet inner body components and controls.