ActionSheet

ActionSheet presents a set of actions in a modal sheet from the bottom of the screen. Use for contextual actions, confirmations, or choices.

Preview

READING OPTIONS

Share Reading

Save to Journal

Delete Reading

Cancel

Basic Usage

Edit

Duplicate

With Title and Message

SHARE READINGChoose how you’d like to share this reading

Copy Link

Share to Messages

Export as Image

Cancel

<ActionSheet
  visible={showShare}
  onClose={() => setShowShare(false)}
  title="Share Reading"
  message="Choose how you'd like to share this reading"
  options={[
    { label: 'Copy Link', onPress: copyLink },
    { label: 'Share to Messages', onPress: shareMessages },
    { label: 'Export as Image', onPress: exportImage },
  ]}
/>

Destructive Actions

Use the destructive property for dangerous actions like delete.

DELETE READING?This action cannot be undone

Delete Permanently

Cancel

<ActionSheet
  visible={showDelete}
  onClose={() => setShowDelete(false)}
  title="Delete Reading?"
  message="This action cannot be undone"
  options={[
    {
      label: 'Delete Permanently',
      onPress: handleDelete,
      destructive: true
    },
  ]}
/>

With Icons

📤 Share

📋 Copy

💾 Save

Cancel

<ActionSheet
  visible={showActions}
  onClose={() => setShowActions(false)}
  options={[
    { label: 'Share', onPress: share, icon: <ShareIcon /> },
    { label: 'Copy', onPress: copy, icon: <CopyIcon /> },
    { label: 'Save', onPress: save, icon: <SaveIcon /> },
  ]}
/>

Disabled Options

Free Feature

Premium Feature

Team Feature

Cancel

<ActionSheet
  visible={showUpgrade}
  onClose={() => setShowUpgrade(false)}
  options={[
    { label: 'Free Feature', onPress: useFreature },
    { label: 'Premium Feature', onPress: usePremium, disabled: !isPremium },
    { label: 'Team Feature', onPress: useTeam, disabled: !isTeam },
  ]}
/>

API Reference

ActionSheet Props

Prop	Type	Default	Description
`visible`	`boolean`	Required	Whether visible
`onClose`	`() => void`	Required	Close handler
`options`	`ActionSheetOption[]`	Required	Action options
`title`	`string`	-	Sheet title
`message`	`string`	-	Sheet message
`cancelLabel`	`string`	`'Cancel'`	Cancel button text
`style`	`ViewStyle`	-	Custom styles

ActionSheetOption

Prop	Type	Default	Description
`label`	`string`	Required	Option text
`onPress`	`() => void`	Required	Press handler
`destructive`	`boolean`	`false`	Destructive styling
`disabled`	`boolean`	`false`	Disabled state
`icon`	`ReactNode`	-	Option icon

Complete Example

import { ActionSheet, IconButton, Card } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function ReadingCard({ reading, onDelete, onShare }) {
  const [showActions, setShowActions] = useState(false);

  const handleDelete = () => {
    Alert.alert(
      'Delete Reading',
      'Are you sure you want to delete this reading?',
      [
        { text: 'Cancel', style: 'cancel' },
        { text: 'Delete', style: 'destructive', onPress: onDelete },
      ]
    );
  };

  return (
    <>
      <Card>
        <View style={styles.header}>
          <Text style={styles.title}>{reading.hexagram.name}</Text>
          <IconButton
            icon="more"
            variant="ghost"
            onPress={() => setShowActions(true)}
            accessibilityLabel="More options"
          />
        </View>
        <Text style={styles.date}>{reading.date}</Text>
      </Card>

      <ActionSheet
        visible={showActions}
        onClose={() => setShowActions(false)}
        title="Reading Options"
        options={[
          {
            label: 'Share Reading',
            onPress: onShare,
            icon: <ShareIcon />,
          },
          {
            label: 'Add to Favorites',
            onPress: () => addToFavorites(reading.id),
            icon: <HeartIcon />,
          },
          {
            label: 'Export as PDF',
            onPress: () => exportPDF(reading),
            icon: <FileIcon />,
          },
          {
            label: 'Delete Reading',
            onPress: handleDelete,
            destructive: true,
            icon: <TrashIcon />,
          },
        ]}
      />
    </>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
  },
  date: {
    fontSize: 14,
    color: '#8a8a9a',
    marginTop: 4,
  },
});