Action Sheet

Overlay

iOS-style bottom sheet with drag handle, title/message header, action list with icon support, destructive variant, lifecycle-safe spring animation, and separate cancel button.

GitHub

Installation

bash

npx native-mate add action-sheet

Examples

#FAFAFA

Radius100%

Usage

tsx

import { ActionSheet } from '~/components/ui/action-sheet'
import { useState } from 'react'

const [open, setOpen] = useState(false)

const actions = [
  { label: 'Edit post', onPress: handleEdit },
  { label: 'Share', onPress: handleShare },
  { label: 'Delete post', onPress: handleDelete, destructive: true },
]

<ActionSheet
  isOpen={open}
  onClose={() => setOpen(false)}
  title="Post options"
  actions={actions}
/>

Props

Prop	Type	Default	Description
isOpen	boolean	—	Controls visibility of the action sheet.
onClose	() => void	—	Called when the sheet is dismissed.
actions	Array<ActionSheetAction>	—	List of action items. Each action has label, onPress, optional variant ("destructive"), icon, and disabled.
title	string	—	Short title shown at the top of the sheet.
message	string	—	Secondary message shown below the title.
cancelLabel	string	"Cancel"	Label for the cancel button.

Example

tsx

import { useState } from 'react'
import { ActionSheet } from '~/components/ui/action-sheet'
import { Button } from '~/components/ui/button'
import { View } from 'react-native'

export function ActionSheetExample() {
  const [open, setOpen] = useState(false)

  const actions = [
    { label: 'Take photo', onPress: () => { /* camera */ setOpen(false) } },
    { label: 'Choose from library', onPress: () => { /* picker */ setOpen(false) } },
    { label: 'Remove photo', onPress: () => { /* remove */ setOpen(false) }, destructive: true },
  ]

  return (
    <View style={{ padding: 16 }}>
      <Button variant="outline" onPress={() => setOpen(true)}>Change avatar</Button>
      <ActionSheet
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Change profile photo"
        actions={actions}
      />
    </View>
  )
}

OTP Input

Tag