Sheet

A Sheet component presents content in a sliding bottom panel. Built on top of heroui-native Sheet.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Sheet running in the Nayan UI example app

Usage

Source
Sheet.tsx
import { useState } from 'react';
import { View } from 'react-native';
import { NButton, NSheet, NText } from '@nayan-ui/native';


export default function SheetScreen() {
  const [basic, setBasic] = useState(false);
  const [content, setContent] = useState(false);


  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Basic</NText>
      <NButton onPress={() => setBasic(true)}>Open Sheet</NButton>
      <NSheet isOpen={basic} onOpenChange={setBasic}>
        <View className="p-4">
          <NText className="text-lg font-bold mb-2">Bottom Sheet</NText>
          <NText>Simple sheet content.</NText>
          <NButton className="mt-4" variant="outline" onPress={() => setBasic(false)}>
            Close
          </NButton>
        </View>
      </NSheet>


      <NText className="text-lg font-bold">Rich content</NText>
      <NButton variant="outline" onPress={() => setContent(true)}>
        Open Rich Sheet
      </NButton>
      <NSheet isOpen={content} onOpenChange={setContent}>
        <View className="p-4 gap-3">
          <NText className="text-xl font-bold">Settings</NText>
          <NText className="text-muted">Adjust your preferences below.</NText>
          <NButton onPress={() => setContent(false)}>Save</NButton>
          <NButton variant="ghost" onPress={() => setContent(false)}>
            Cancel
          </NButton>
        </View>
      </NSheet>
    </View>
  );
}

Attributes

11 props
NameTypeDefaultDetails
childrenReact.ReactNodeRequiredContent for the sheet.
triggerReact.ReactNodeOptionalTrigger element to open the sheet.
titlestringOptionalTitle shown at the top of the sheet.
descriptionstringOptionalDescription text below the title.
isOpenbooleanOptionalControlled open state.
isDefaultOpenbooleanOptionalDefault open state for uncontrolled usage.
onOpenChange(isOpen: boolean) => voidOptionalCallback when open state changes.
classNamestring' 'You can customise content by passing tailwind classes.
titleClassNamestring' 'You can customise title by passing tailwind classes.
descriptionClassNamestring' 'You can customise description by passing tailwind classes.
snapPoints(string | number)[]OptionalArray of snap points for the bottom sheet.

Tags

Other components solving nearby problems.