Sheet
OverlayA bottom sheet with configurable snap points, drag handle, backdrop dismiss, and smooth Reanimated spring animation.
Installation
bash
1
npx native-mate add sheetExamples
#FAFAFA
Radius100%
Usage
tsx
1
2
3
4
5
6
7
8
9
import { Sheet } from '~/components/ui/sheet'
const [open, setOpen] = useState(false)
<Sheet isOpen={open} onClose={() => setOpen(false)} snapPoints={['40%', '80%']}>
<View style={{ padding: 16 }}>
<Text>Sheet content</Text>
</View>
</Sheet>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | — | Controls sheet visibility. |
| onClose | () => void | — | Called when user dismisses the sheet. |
| snapPoints | Array<`${number}%`> | ["50%", "90%"] | Snap positions as viewport-height percentages. |
| children | React.ReactNode | — | Sheet content. |
Example
tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useState } from 'react'
import { Sheet } from '~/components/ui/sheet'
import { Button } from '~/components/ui/button'
import { View } from 'react-native'
import { Text } from '@native-mate/core'
export function SheetExample() {
const [open, setOpen] = useState(false)
return (
<View style={{ padding: 16 }}>
<Button onPress={() => setOpen(true)}>Open Sheet</Button>
<Sheet isOpen={open} onClose={() => setOpen(false)} snapPoints={['50%']}>
<View style={{ padding: 24, gap: 16 }}>
<Text size="lg" weight="semibold">Sheet title</Text>
<Text color="muted">Some content inside the sheet.</Text>
<Button onPress={() => setOpen(false)}>Close</Button>
</View>
</Sheet>
</View>
)
}