Native

BottomSheet

A sheet that slides up over the screen: rung 5 of the disclosure ladder. SheetRow is its 44px touch row, with an optional danger tint.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md; setup for every native component is on React Native.

Component	Notes
`BottomSheet` + `SheetRow`	Slide-up overlay (rung 5). 2px ink top-rule, tracing-paper scrim, square corners. `SheetRow` = 44px touch row with optional danger tint.

Rung 5 — action clusters and short edits slide up from the bottom.

import { BottomSheet, SheetRow } from 'achery-ui/native'

<BottomSheet open={open} onClose={() => setOpen(false)} title="Row actions">
  <SheetRow label="Edit" onPress={handleEdit} />
  <SheetRow label="Delete" onPress={handleDelete} danger />
</BottomSheet>

BottomSheet props:

Prop	Type	Default
`open`	`boolean`	required
`onClose`	`() => void`	required
`title`	`string`	—
`showClose`	`boolean`	`false`
`children`	`ReactNode`	required
`maxContentHeight`	`number`	— (grows with content)
`avoidKeyboard`	`boolean`	`true` — lifts the sheet above the keyboard when a field inside is focused (and shortens the scroll body to stay on-screen). Set `false` to manage avoidance yourself.
`style`	`ViewStyle`	—

SheetRow props:

Prop	Type	Default
`label`	`string`	required
`onPress`	`() => void`	required
`danger`	`boolean`	`false`
`accessory`	`ReactNode`	—
`disabled`	`boolean`	`false`