### Install Project Dependencies

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Installs the necessary dependencies for the example project. Run this after cloning the repository.

```bash
$ cd example
$ yarn
```

--------------------------------

### Build Example App

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Builds the example application for iOS, Android, or web. Ensure dependencies are installed first.

```bash
$ yarn ios
$ yarn android

$ yarn web
```

--------------------------------

### Install with yarn

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Use this command to install the library using yarn.

```bash
yarn add @expo/react-native-action-sheet
```

--------------------------------

### Install with npm

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Use this command to install the library using npm.

```bash
npm install @expo/react-native-action-sheet
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Clones the action sheet repository and installs its main dependencies. This is the initial setup for development.

```bash
$ git clone git@github.com:expo/react-native-action-sheet.git
$ cd react-native-action-sheet
$ yarn
```

--------------------------------

### Run Web Example

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Navigate to the example directory and run the web application using yarn. This is used for testing web-specific features like keyboard navigation and responsive design.

```bash
cd example
yarn web
```

--------------------------------

### Run iOS Example

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Navigate to the example directory and run the iOS application using yarn. This is used for testing native and custom ActionSheets.

```bash
cd example
yarn ios
```

--------------------------------

### Install React Native Action Sheet

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/README.md

Install the library using npm or yarn. Ensure you have React 18.0.0+ and a recent version of react-native.

```bash
npm install @expo/react-native-action-sheet
# or
yarn add @expo/react-native-action-sheet
```

--------------------------------

### Run Android Example

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Navigate to the example directory and run the Android application using yarn. This is used for testing platform-specific features like ripple effects and hardware back button.

```bash
cd example
yarn android
```

--------------------------------

### Basic ActionSheetProvider Setup

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/ActionSheetProvider.md

Shows the most common way to integrate ActionSheetProvider by wrapping the root application component.

```typescript
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
import App from './App';

export default function AppContainer() {
  return (
    <ActionSheetProvider>
      <App />
    </ActionSheetProvider>
  );
}
```

--------------------------------

### Basic ActionSheet Setup and Usage

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/usage-patterns.md

Demonstrates the minimal setup required to integrate ActionSheet into your React Native app. This includes wrapping your app with ActionSheetProvider and using the useActionSheet hook to display options.

```typescript
// App.tsx
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
import AppContent from './AppContent';

export default function App() {
  return (
    <ActionSheetProvider>
      <AppContent />
    </ActionSheetProvider>
  );
}

// AppContent.tsx or any child component
import { useActionSheet } from '@expo/react-native-action-sheet';
import { View, Button } from 'react-native';

export default function MyComponent() {
  const { showActionSheetWithOptions } = useActionSheet();

  const handlePress = () => {
    const options = ['Option 1', 'Option 2', 'Cancel'];
    const cancelButtonIndex = 2;

    showActionSheetWithOptions(
      { options, cancelButtonIndex },
      (index) => {
        console.log('Selected:', index);
      }
    );
  };

  return (
    <View>
      <Button title="Show Menu" onPress={handlePress} />
    </View>
  );
}
```

--------------------------------

### Custom ActionSheet Styling Example

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Provides an example of how to customize the appearance of the ActionSheet on Android using various styling options for text, titles, messages, containers, and separators.

```typescript
showActionSheetWithOptions(
  {
    options: ['Edit', 'Delete', 'Archive', 'Cancel'],
    title: 'Choose Action',
    message: 'What would you like to do?',
    cancelButtonIndex: 3,
    destructiveButtonIndex: 1,
    destructiveColor: '#FF0000',
    textStyle: {
      fontSize: 16,
      color: '#222',
    },
    titleTextStyle: {
      fontSize: 20,
      fontWeight: 'bold',
    },
    messageTextStyle: {
      fontSize: 14,
      color: '#666',
    },
    containerStyle: {
      backgroundColor: '#f5f5f5',
    },
    separatorStyle: {
      backgroundColor: '#ddd',
      height: 1,
    },
    showSeparators: true,
  },
  (index) => { /* ... */ }
);
```

--------------------------------

### Minimal Setup for Action Sheet

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/README.md

Wrap your application with ActionSheetProvider and use the useActionSheet hook in your components to display action sheets.

```typescript
import { ActionSheetProvider, useActionSheet } from '@expo/react-native-action-sheet';
import { View, Button } from 'react-native';

// 1. Wrap app
export default function App() {
  return (
    <ActionSheetProvider>
      <MenuScreen />
    </ActionSheetProvider>
  );
}

// 2. Use in component
function MenuScreen() {
  const { showActionSheetWithOptions } = useActionSheet();

  const handlePress = () => {
    showActionSheetWithOptions(
      {
        options: ['Delete', 'Save', 'Cancel'],
        cancelButtonIndex: 2,
        destructiveButtonIndex: 0,
      },
      (index) => {
        if (index === 0) console.log('Deleted');
        if (index === 1) console.log('Saved');
      }
    );
  };

  return <Button title="Menu" onPress={handlePress} />;
}
```

--------------------------------

### Basic ActionSheet Configuration

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/types.md

A simple example of configuring an ActionSheet with basic options, including button titles and indices for cancel and destructive actions.

```typescript
const options: ActionSheetOptions = {
  options: ['Delete', 'Save', 'Cancel'],
  cancelButtonIndex: 2,
  destructiveButtonIndex: 0,
};
```

--------------------------------

### Displaying ActionSheet with Options

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/CustomActionSheet.md

Example of how to use the showActionSheetWithOptions method to display a custom action sheet. Ensure you have a ref to the CustomActionSheet component.

```typescript
const customActionSheetRef = useRef<CustomActionSheet>(null);

const showMenu = () => {
  customActionSheetRef.current?.showActionSheetWithOptions(
    {
      options: ['Delete', 'Save', 'Cancel'],
      cancelButtonIndex: 2,
      destructiveButtonIndex: 0,
    },
    (index) => {
      console.log('Selected option:', index);
    }
  );
};
```

--------------------------------

### Wrap App with ActionSheetProvider

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Wrap your top-level component with ActionSheetProvider to enable context for invoking the menu. This is a required setup step.

```jsx
import { ActionSheetProvider } from '@expo/react-native-action-sheet';

export default function AppContainer() {
  return (
    <ActionSheetProvider>
      <App />
    </ActionSheetProvider>
  );
}
```

--------------------------------

### Async Action Pattern with Action Sheet

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/usage-patterns.md

Perform asynchronous operations after a user selects an option from the action sheet. This example simulates an API call and updates the UI based on the operation's success or failure.

```typescript
import { useActionSheet } from '@expo/react-native-action-sheet';
import { View, Button, ActivityIndicator, Text } from 'react-native';
import { useState } from 'react';

export default function AsyncActionComponent() {
  const { showActionSheetWithOptions } = useActionSheet();
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState('');

  const handleAction = async (action: string) => {
    setLoading(true);
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      setResult(`${action} completed successfully`);
    } catch (error) {
      setResult('Error performing action');
    } finally {
      setLoading(false);
    }
  };

  const handleShowActionSheet = () => {
    const options = ['Action 1', 'Action 2', 'Action 3', 'Cancel'];
    const actions = ['Action 1', 'Action 2', 'Action 3'];
    const cancelButtonIndex = 3;

    showActionSheetWithOptions(
      { options, cancelButtonIndex },
      (index) => {
        if (index !== undefined && index < 3) {
          handleAction(actions[index]);
        }
      }
    );
  };

  return (
    <View>
      <Button title="Perform Action" onPress={handleShowActionSheet} disabled={loading} />
      {loading && <ActivityIndicator size="large" />}
      {result && <Text>{result}</Text>}
    </View>
  );
}
```

--------------------------------

### Using useCustomActionSheet on iOS

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Example of how to use the useCustomActionSheet prop on iOS to enable the pure JS action sheet. This prop is only applicable to iOS.

```jsx
export default function AppContainer() {
  return (
    <ActionSheetProvider useCustomActionSheet={true}>
      <App />
    </ActionSheetProvider>
  );
}
```

--------------------------------

### ActionGroup Usage with TouchableNativeFeedbackSafe

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/TouchableNativeFeedbackSafe.md

Example of how ActionGroup uses TouchableNativeFeedbackSafe to render option buttons. It demonstrates setting up the ripple background and applying the component within a rendering loop.

```typescript
const nativeFeedbackBackground = TouchableNativeFeedbackSafe.Ripple(
  'rgba(180, 180, 180, 1)',
  false
);

// Inside rendering loop:
<TouchableNativeFeedbackSafe
  ref={autoFocus && i === 0 ? focusViewOnRender : undefined}
  key={i}
  pressInDelay={0}
  background={nativeFeedbackBackground}
  disabled={disabled}
  onPress={() => onSelect(i)}
  style={[styles.button, disabled && styles.disabledButton]}
  accessibilityRole="button"
  accessibilityLabel={options[i]}>
  {this._renderIconElement(iconSource, color)}
  <Text style={[styles.text, textStyle, { color }]}>
    {options[i]}
  </Text>
</TouchableNativeFeedbackSafe>
```

--------------------------------

### TypeScript Typing with ActionSheetProps

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/connectActionSheet.md

When using TypeScript, ensure your wrapped component properly types the ActionSheetProps. This example demonstrates the basic interface extension.

```typescript
import { ActionSheetProps } from '@expo/react-native-action-sheet';

interface MyComponentProps extends ActionSheetProps {
  customProp: string;
}

function MyComponent({ showActionSheetWithOptions, customProp }: MyComponentProps) {
  // showActionSheetWithOptions is properly typed
}
```

--------------------------------

### ActionSheet Title and Message Rendering Example

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/ActionGroup.md

Illustrates the visual structure of the title and message sections in the ActionSheet. Custom styles can be applied using `titleTextStyle` and `messageTextStyle`.

```text
┌─────────────────────────┐
│ Choose an Action        │ ← title
│ Select what to do       │ ← message
├─────────────────────────┤ ← separator (if showSeparators=true)
│ Edit                    │
│ Delete                  │
│ Cancel                  │
└─────────────────────────┘
```

--------------------------------

### Functional Component with connectActionSheet

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/connectActionSheet.md

This example shows how to integrate connectActionSheet with a functional component. The HOC injects showActionSheetWithOptions as a prop, allowing the functional component to trigger the action sheet.

```typescript
import { connectActionSheet } from '@expo/react-native-action-sheet';
import { ActionSheetProps } from '@expo/react-native-action-sheet';
import { View, Button } from 'react-native';

interface Props extends ActionSheetProps {
  onAction: (action: string) => void;
}

function ActionMenu({ showActionSheetWithOptions, onAction }: Props) {
  const handlePress = () => {
    showActionSheetWithOptions(
      {
        options: ['Option A', 'Option B', 'Option C', 'Cancel'],
        cancelButtonIndex: 3,
      },
      (index) => {
        if (index !== undefined && index !== 3) {
          onAction(['A', 'B', 'C'][index]);
        }
      }
    );
  };

  return (
    <View>
      <Button title="Actions" onPress={handlePress} />
    </View>
  );
}

export default connectActionSheet(ActionMenu);
```

--------------------------------

### Cross-Platform: Detect Platform in Component

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Use `Platform.select` to conditionally apply options based on the operating system. This example shows how to set platform-specific properties like `userInterfaceStyle` for iOS, `showSeparators` for Android, and `autoFocus` for Web.

```typescript
import {
  Platform
} from 'react-native';

function MyComponent() {
  const { showActionSheetWithOptions } = useActionSheet();

  const handleShow = () => {
    const baseOptions = {
      options: ['Option 1', 'Option 2', 'Cancel'],
      cancelButtonIndex: 2,
    };

    const platformOptions = Platform.select({
      ios: {
        ...baseOptions,
        userInterfaceStyle: 'dark', // iOS only
      },
      android: {
        ...baseOptions,
        showSeparators: true,
        containerStyle: { backgroundColor: '#f5f5f5' },
      },
      web: {
        ...baseOptions,
        autoFocus: true, // Focus first option on Web
      },
    });

    showActionSheetWithOptions(platformOptions, (index) => {
      // Handle selection
    });
  };

  return <Button title="Show" onPress={handleShow} />;
}
```

--------------------------------

### Platform-Specific Entry Point Selection

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Illustrates how Platform.select() is used to determine the entry point for Android/Web versus iOS.

```plaintext
Android/Web: 	→ index.tsx 	→ CustomActionSheet
iOS: 		→ index.ios.tsx 	→ Native ActionSheetIOS
```

--------------------------------

### TouchableNativeFeedbackSafe Static Methods

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/TouchableNativeFeedbackSafe.md

Demonstrates the usage of static methods to obtain background configurations for touch feedback. These methods provide consistent interfaces across platforms, with native ripple effects on Android 5.0+ and fallback opacity feedback elsewhere.

```typescript
// These work the same way on all platforms
const bg1 = TouchableNativeFeedbackSafe.SelectableBackground();
const bg2 = TouchableNativeFeedbackSafe.SelectableBackgroundBorderless();
const bg3 = TouchableNativeFeedbackSafe.Ripple('rgba(0, 0, 0, 0.1)');

// On Android 5.0+: actual ripple effects
// On other platforms: ignored (empty objects), opacity feedback used instead
```

--------------------------------

### showActionSheetWithOptions

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/INDEX.md

This is the main method to display an action sheet with specified options and a callback to handle user selection.

```APIDOC
## showActionSheetWithOptions

### Description
Displays an action sheet to the user with a list of options. The callback function is invoked with the index of the selected option.

### Method
```javascript
showActionSheetWithOptions(options: ActionSheetOptions, callback: (index?: number) => void | Promise<void>): void
```

### Parameters
#### Options
- **options** (ActionSheetOptions) - An object containing the configuration for the action sheet, including title, message, options, destructive button index, etc.

#### Callback
- **callback** (function) - A function that will be called with the index of the selected button. If no button is pressed, the index will be undefined.
```

--------------------------------

### Bob Build Configuration

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Configuration for the Bob build tool, specifying source and output directories, and build targets for the library.

```json
{
  "@react-native-community/bob": {
    "source": "src",
    "output": "lib",
    "targets": ["commonjs", "module", "typescript"]
  }
}
```

--------------------------------

### Input Handling Pipeline: Touch/Tap Events (Android/Web)

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Illustrates the flow of events when a user taps an option button on Android or Web. It includes checks for animation state and defers callbacks if necessary.

```text
User taps option button
  ↓
TouchableNativeFeedbackSafe.onPress fires (if not disabled)
  ↓
ActionGroup._renderOptionViews calls onSelect(index)
  ↓
CustomActionSheet._onSelect(index) called
  ↓
Checks isAnimating (prevents selection during animation)
  ↓
Defers callback: _deferAfterAnimation = onSelect.bind(this, index)
  ↓
Calls _animateOut()
```

--------------------------------

### Documentation Structure Overview

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/START_HERE.md

This snippet outlines the directory structure of the project's documentation, indicating the purpose of each file and folder.

```text
output/
├── README.md                    ← Quick start & overview
├── START_HERE.md                ← This file
├── INDEX.md                     ← Complete navigation guide
├── MANIFEST.txt                 ← Detailed file listing
│
├── types.md                     ← Type definitions
├── configuration.md             ← All configuration options
├── architecture.md              ← How it works internally
├── platform-guide.md            ← iOS, Android, Web, Windows
├── usage-patterns.md            ← 13 real-world patterns
├── troubleshooting.md           ← Problem solving
│
└── api-reference/               ← Component documentation
    ├── ActionSheetProvider.md
    ├── useActionSheet.md
    ├── connectActionSheet.md
    ├── CustomActionSheet.md
    ├── ActionGroup.md
    └── TouchableNativeFeedbackSafe.md
```

--------------------------------

### Complete Universal Action Sheet Configuration

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/configuration.md

Demonstrates a comprehensive configuration for an action sheet, including title, message, button styling, and platform-specific indices.

```typescript
const options = {
  // Required
  options: ['Edit', 'Delete', 'Archive', 'Cancel'],

  // Text and messaging
  title: 'Choose an Action',
  message: 'What would you like to do with this item?',

  // Button styling and behavior
  tintColor: '#007AFF',
  cancelButtonIndex: 3,
  cancelButtonTintColor: '#666',
  destructiveButtonIndex: 1,
  destructiveColor: '#FF3B30',
  disabledButtonIndices: [2], // Archive is disabled

  // iOS specific
  anchor: findNodeHandle(this.anchorRef.current),
  userInterfaceStyle: 'dark',
};

showActionSheetWithOptions(options, (index) => {
  // Handle selection
});
```

--------------------------------

### ActionSheetProviderRef

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/types.md

Reference object for ActionSheetProvider component, extending ActionSheetProps. It allows direct invocation of showActionSheetWithOptions and provides a deprecated method to get the context.

```APIDOC
## ActionSheetProviderRef

### Description
Reference object for `ActionSheetProvider` component, extending `ActionSheetProps`. It allows direct invocation of `showActionSheetWithOptions` and provides a deprecated method to get the context.

### Interface
```typescript
interface ActionSheetProviderRef extends ActionSheetProps {
  /**
   * @deprecated Simply call `showActionSheetWithOptions()` directly from the ref now
   */
  getContext: () => ActionSheetProps;
  showActionSheetWithOptions: (
    options: ActionSheetOptions,
    callback: (i?: number) => void | Promise<void>
  ) => void;
}
```

### Fields
- `getContext` (function) - **Deprecated.** Legacy method for backward compatibility. Directly call `showActionSheetWithOptions()` instead.
- `showActionSheetWithOptions` (function) - Function to show an ActionSheet via the ref.
```

--------------------------------

### ActionSheetProvider Children Constraint Example

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/ActionSheetProvider.md

Illustrates the correct usage of ActionSheetProvider with a single child component and highlights the incorrect usage with multiple direct children.

```typescript
// Correct
<ActionSheetProvider>
  <RootNavigator />
</ActionSheetProvider>

// Incorrect - will throw an error
<ActionSheetProvider>
  <Navigation />
  <Other />
</ActionSheetProvider>
```

--------------------------------

### Show Action Sheet with Options

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/README.md

Demonstrates how to display an action sheet with customizable options, title, message, and accessibility features like autoFocus and useModal. Use this for presenting choices to the user.

```typescript
showActionSheetWithOptions({
  options: ['Edit', 'Delete', 'Cancel'],
  title: 'Choose Action',
  message: 'What would you like to do?',
  cancelButtonIndex: 2,
  autoFocus: true,
  useModal: true,
});
```

--------------------------------

### Callback and Selection Data Flow

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Describes the process from a user selecting an option to the callback being executed and the state being reset.

```text
User selects option (index)
  ├─ TouchableNativeFeedbackSafe.onPress fires
  ├─ ActionGroup calls onSelect(index)
  ├─ CustomActionSheet._onSelect processes selection
  │  ├─ Sets _deferAfterAnimation = onSelect.bind(this, index)
  │  └─ Calls _animateOut()
  ├─ Animation completes
  └─ State updates to isVisible: false
      ├─ Calls _deferAfterAnimation() → user's callback with index
      ├─ Checks if new ActionSheet was queued during animation
      └─ If queued: calls showActionSheetWithOptions again
```

--------------------------------

### Minimal Action Sheet Configuration

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/configuration.md

This snippet shows the most basic configuration for displaying an action sheet with options and a cancel button.

```typescript
const { showActionSheetWithOptions } = useActionSheet();

showActionSheetWithOptions(
  {
    options: ['Option 1', 'Option 2', 'Cancel'],
    cancelButtonIndex: 2,
  },
  (index) => {
    console.log('Selected:', index);
  }
);
```

--------------------------------

### useActionSheet Hook

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/INDEX.md

A React Hook designed for functional components, providing direct access to the `showActionSheetWithOptions` function. It follows standard hook rules and offers various usage examples.

```APIDOC
## useActionSheet

### Description
A React Hook for functional components that provides the `showActionSheetWithOptions` function.

### Returns
- **showActionSheetWithOptions**: A function to display the action sheet.

### Usage
Import and call this hook within your functional components to easily present action sheets. Follows standard React Hook rules.
```

--------------------------------

### Show Action Sheet with Provider Ref

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/ActionSheetProvider.md

Demonstrates how to use the `showActionSheetWithOptions` method directly from the `ActionSheetProvider` ref to display an action sheet.

```typescript
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
import { useRef } from 'react';

export default function App() {
  const actionSheetRef = useRef<ActionSheetProviderRef>(null);

  const showMenu = () => {
    actionSheetRef.current?.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Delete', 'Save'],
        cancelButtonIndex: 0,
        destructiveButtonIndex: 1,
      },
      (index) => {
        if (index === 1) {
          // Handle delete
        }
      }
    );
  };

  return (
    <ActionSheetProvider ref={actionSheetRef}>
      <App showMenu={showMenu} />
    </ActionSheetProvider>
  );
}
```

--------------------------------

### Custom Button with Ripple Effect

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/TouchableNativeFeedbackSafe.md

Example of creating a custom button component using TouchableNativeFeedbackSafe. It configures a ripple effect for Android and applies basic styling and disabled state handling.

```typescript
import { View, Text } from 'react-native';
import TouchableNativeFeedbackSafe from './TouchableNativeFeedbackSafe';

export default function MyButton({ onPress, disabled, label }) {
  const background = TouchableNativeFeedbackSafe.Ripple(
    'rgba(0, 0, 0, 0.1)',
    false
  );

  return (
    <TouchableNativeFeedbackSafe
      background={background}
      onPress={onPress}
      disabled={disabled}
      pressInDelay={0}
      style={{ 
        paddingHorizontal: 16,
        paddingVertical: 12,
        opacity: disabled ? 0.5 : 1,
      }}
    >
      <Text>{label}</Text>
    </TouchableNativeFeedbackSafe>
  );
}
```

--------------------------------

### Display ActionSheet with Options

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/README.md

Display an ActionSheet by calling showActionSheetWithOptions with configuration options and a callback function to handle user selections. The callback receives the selected index.

```typescript
showActionSheetWithOptions(
  {
    options: ['Edit', 'Delete', 'Cancel'],
    title: 'Choose Action',
    cancelButtonIndex: 2,
    destructiveButtonIndex: 1,
    // ... more options
  },
  (selectedIndex) => {
    // Handle selection
  }
);
```

--------------------------------

### Direct Ref Access for Action Sheet

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Access the ActionSheetProvider's ref directly to programmatically show action sheets or get context. Note that getContext() is deprecated but still available.

```typescript
const ref = useRef<ActionSheetProviderRef>(null);

ref.current?.showActionSheetWithOptions(options, callback);
ref.current?.getContext();  // deprecated but available
```

--------------------------------

### Show Action Sheet with Options Callback

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/INDEX.md

Demonstrates how to use the `showActionSheetWithOptions` function and handle the callback with the selected button's index. The index is undefined if the action sheet is dismissed without a selection.

```typescript
showActionSheetWithOptions(options, (index?: number) => {
  // index: 0-based index of selected option
  // index: undefined if dismissed without selecting
});
```

--------------------------------

### Cross-Platform: Conditional Icon Display

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Conditionally display icons for action sheet options based on the platform. Native iOS Action Sheets do not support icons, so they are only provided for Android and Web in this example.

```typescript
import {
  Platform
} from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';

function MyComponent() {
  const { showActionSheetWithOptions } = useActionSheet();

  const handleShow = () => {
    const options = ['Share', 'Save', 'Cancel'];
    
    // Icons only on Android/Web (iOS native ActionSheet doesn't support them)
    const icons = Platform.select({
      android: [
        <MaterialIcons name="share" size={24} />,
        <MaterialIcons name="save" size={24} />,
      ],
      web: [
        <MaterialIcons name="share" size={24} />,
        <MaterialIcons name="save" size={24} />,
      ],
      ios: undefined, // Native iOS doesn't support icons
    });

    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex: 2,
        icons,
      },
      (index) => { /* ... */ }
    );
  };

  return <Button title="Actions" onPress={handleShow} />;
}
```

--------------------------------

### Accessing Static Properties with connectActionSheet

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/connectActionSheet.md

When connectActionSheet wraps a component, it preserves static methods and properties from the wrapped component using hoist-non-react-statics. This example shows how static properties like navigationOptions are accessible on the HOC.

```typescript
class MyComponent extends React.Component {
  static navigationOptions = { ... };
  
  // ... component code
}

const ConnectedComponent = connectActionSheet(MyComponent);
// ConnectedComponent.navigationOptions is available
```

--------------------------------

### Show Action Sheet with Options

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/INDEX.md

Use this function to display the action sheet to the user. It takes an options object and a callback function that is executed when the user selects an option or dismisses the sheet.

```typescript
showActionSheetWithOptions(
  options: ActionSheetOptions,
  callback: (index?: number) => void | Promise<void>
): void;

```

--------------------------------

### Build Library with Bob

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

Builds the react-native-action-sheet library using the Bob tool. This command is used after making code changes.

```bash
$ yarn build
```

--------------------------------

### Project Structure

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Overview of the source code directory structure for the @expo/react-native-action-sheet library.

```tree
src/
├── index.ts                          # Main entry point, re-exports public API
├── types.ts                          # TypeScript interface definitions
├── context.ts                        # React Context for ActionSheet
├── ActionSheetProvider.tsx           # Provider component (main wrapper)
├── connectActionSheet.tsx            # Higher-order component (HOC)
└── ActionSheet/
    ├── index.tsx                     # Re-exports CustomActionSheet (default for Android/Web)
    ├── index.ios.tsx                 # Native iOS ActionSheet wrapper
    ├── CustomActionSheet.tsx         # Custom JS implementation (Android/Web/optional iOS)
    ├── ActionGroup.tsx               # Button rendering component
    └── TouchableNativeFeedbackSafe.tsx  # Cross-platform touchable wrapper
```

--------------------------------

### Basic Action Sheet Usage

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/START_HERE.md

Demonstrates how to use the `useActionSheet` hook to display a basic action sheet with options, cancel button, and destructive action index. Handles user selection via a callback.

```typescript
function MyComponent() {
  const { showActionSheetWithOptions } = useActionSheet();
  
  const handlePress = () => {
    showActionSheetWithOptions(
      {
        options: ['Delete', 'Save', 'Cancel'],
        cancelButtonIndex: 2,
        destructiveButtonIndex: 0,
      },
      (index) => {
        if (index === 0) console.log('Delete');
        if (index === 1) console.log('Save');
      }
    );
  };
  
  return <Button title="Menu" onPress={handlePress} />;
}
```

--------------------------------

### Basic ActionSheet with Menu

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/useActionSheet.md

Displays a simple action sheet with a list of options and a cancel button. Use this for basic menu selections.

```typescript
import { useActionSheet } from '@expo/react-native-action-sheet';
import { View, Button } from 'react-native';

function MenuComponent() {
  const { showActionSheetWithOptions } = useActionSheet();

  const onPress = () => {
    const options = ['Delete', 'Save', 'Cancel'];
    const cancelButtonIndex = 2;
    const destructiveButtonIndex = 0;

    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        destructiveButtonIndex,
      },
      (selectedIndex) => {
        switch (selectedIndex) {
          case 0:
            // Delete selected
            console.log('Delete');
            break;
          case 1:
            // Save selected
            console.log('Save');
            break;
          case cancelButtonIndex:
            // Cancel or dismissed
            break;
        }
      }
    );
  };

  return (
    <View>
      <Button title="Show Menu" onPress={onPress} />
    </View>
  );
}
```

--------------------------------

### Setting up ActionSheetProvider

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/connectActionSheet.md

To use connectActionSheet, ensure your application is wrapped with ActionSheetProvider. This sets up the necessary context for the action sheet functionality.

```typescript
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
import ConnectedComponent from './ConnectedComponent';

export default function App() {
  return (
    <ActionSheetProvider>
      <ConnectedComponent />
    </ActionSheetProvider>
  );
}
```

--------------------------------

### Static Methods

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/TouchableNativeFeedbackSafe.md

These static methods are available on TouchableNativeFeedbackSafe to configure background feedback. They work consistently across platforms, providing native ripple effects on Android 5.0+ and opacity feedback on others.

```APIDOC
## Static Method Reference

All three static methods exist on both `TouchableNativeFeedbackSafe` and the internal `CustomTouchableOpacity`, ensuring consistent interface regardless of platform:

```typescript
// These work the same way on all platforms
const bg1 = TouchableNativeFeedbackSafe.SelectableBackground();
const bg2 = TouchableNativeFeedbackSafe.SelectableBackgroundBorderless();
const bg3 = TouchableNativeFeedbackSafe.Ripple('rgba(0, 0, 0, 0.1)');

// On Android 5.0+: actual ripple effects
// On other platforms: ignored (empty objects), opacity feedback used instead
```

### `TouchableNativeFeedbackSafe.SelectableBackground()`

**Description**: Returns a background object for selectable background feedback.

**Returns**: An object representing the selectable background.

### `TouchableNativeFeedbackSafe.SelectableBackgroundBorderless()`

**Description**: Returns a background object for selectable, borderless background feedback.

**Returns**: An object representing the borderless selectable background.

### `TouchableNativeFeedbackSafe.Ripple(color, borderless?, rippleSize?, rippleRadius?)`

**Description**: Creates a ripple effect with the specified color and optional properties.

**Parameters**:
- **color** (string) - Required - The color of the ripple effect.
- **borderless** (boolean) - Optional - Whether the ripple effect should be borderless.
- **rippleSize** (number) - Optional - The size of the ripple effect.
- **rippleRadius** (number) - Optional - The radius of the ripple effect.

**Returns**: An object representing the ripple effect configuration.
```

--------------------------------

### Display Data Flow

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Details the sequence of events when the showActionSheetWithOptions function is called, including native and custom implementations.

```text
showActionSheetWithOptions() called
  ├─ Hook/HOC passes to Context
  ├─ ActionSheetProvider delegates to ref.current.showActionSheetWithOptions()
  ├─ If iOS native: ActionSheetIOS.showActionSheetWithOptions()
  ├─ If Android/Web/custom: CustomActionSheet.showActionSheetWithOptions()
  │  ├─ Sets state: { isVisible: true, options, onSelect }
  │  ├─ Initiates animations (overlay fade, sheet slide)
  │  ├─ Renders ActionGroup with all options
  │  ├─ Registers back handler (Android) / key handler (Web)
  │  └─ User interaction waits...
  │
  └─ User taps option or dismisses
      ├─ onSelect callback called with index
      ├─ Animations reversed (overlay fade out, sheet slide out)
      ├─ State reset: { isVisible: false }
      └─ Deferred queue checked (multiple calls while visible are queued)
```

--------------------------------

### Mimic Native Context Menu with Custom Styling

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/usage-patterns.md

Use this pattern to replicate the native context menu experience on long press. Customize the appearance of the action sheet using container and text styles.

```typescript
import { useActionSheet } from '@expo/react-native-action-sheet';
import { View, Button, Text } from 'react-native';

export default function ContextMenuComponent() {
  const { showActionSheetWithOptions } = useActionSheet();

  const handleLongPress = () => {
    showActionSheetWithOptions(
      {
        options: ['Copy', 'Cut', 'Paste', 'Delete', 'Cancel'],
        cancelButtonIndex: 4,
        destructiveButtonIndex: 3,
        containerStyle: {
          borderRadius: 8,
          overflow: 'hidden',
        },
        textStyle: {
          fontSize: 15,
          fontWeight: '500',
        },
      },
      (index) => {
        const actions = ['copy', 'cut', 'paste', 'delete'];
        if (index !== undefined && index < 4) {
          console.log(`Performing: ${actions[index]}`);
        }
      }
    );
  };

  return (
    <View onLongPress={handleLongPress} delayLongPress={500}>
      <Text>Long press me</Text>
    </View>
  );
}
```

--------------------------------

### Initialization Data Flow

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Explains the flow when the ActionSheetProvider is initialized in the application. It details how React Context is created and how the internal ActionSheet component is referenced.

```text
App renders ActionSheetProvider
  ├─ Creates React Context with ActionSheetProps
  ├─ Refs internal ActionSheet component (NativeActionSheet or CustomActionSheet)
  ├─ Provides showActionSheetWithOptions method via Context.Provider
  └─ Renders children (passes through to ActionSheet wrapper component)

Child components inside ActionSheetProvider
  ├─ Via useActionSheet Hook: consumes Context
  └─ Via connectActionSheet HOC: wraps with Consumer
```

--------------------------------

### Platform Detection

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/README.md

Logs the current operating system (iOS, Android, or Web) using the Platform module. Helpful for implementing platform-specific logic.

```typescript
import { Platform } from 'react-native';

console.log('Platform:', Platform.OS);
console.log('Is iOS native:', Platform.OS === 'ios');
console.log('Is Android/Web:', Platform.OS === 'android' || Platform.OS === 'web');
```

--------------------------------

### Windows Platform: Use Native Driver Option

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/platform-guide.md

Configure the `useNativeDriver` prop for animation compatibility on Windows. Set to `false` for older Windows 10 versions or if native driver causes issues. The default is `true`.

```typescript
<ActionSheetProvider useNativeDriver={false}>
  {/* For Windows 10 Version 1809 and earlier */}
  <App />
</ActionSheetProvider>
```

--------------------------------

### showActionSheetWithOptions Ref Method

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/ActionSheetProvider.md

Directly show an ActionSheet via the provider ref without needing the hook or HOC. This method is available on the ref forwarded by the ActionSheetProvider.

```APIDOC
## showActionSheetWithOptions(options, callback)

### Description
Directly show an ActionSheet via the provider ref without needing the hook or HOC.

### Method
`showActionSheetWithOptions`

### Parameters

#### `options`
- Type: `ActionSheetOptions`
- Required: Yes
- Description: Configuration for the ActionSheet.

#### `callback`
- Type: `(i?: number) => void | Promise<void>`
- Required: Yes
- Description: Callback invoked with the selected button index.

### Request Example
```typescript
import { ActionSheetProviderRef } from '@expo/react-native-action-sheet';
import { useRef } from 'react';

const actionSheetRef = useRef<ActionSheetProviderRef>(null);

actionSheetRef.current?.showActionSheetWithOptions(
  {
    options: ['Cancel', 'Delete', 'Save'],
    cancelButtonIndex: 0,
    destructiveButtonIndex: 1,
  },
  (index) => {
    if (index === 1) {
      // Handle delete
    }
  }
);
```
```

--------------------------------

### Deferred ActionSheet Execution

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/CustomActionSheet.md

Demonstrates how to handle sequential calls to showActionSheetWithOptions. The second call is deferred until the first ActionSheet is dismissed, ensuring proper queuing and execution of callbacks.

```typescript
actionSheetRef.current?.showActionSheetWithOptions(options1, callback1);

actionSheetRef.current?.showActionSheetWithOptions(options2, callback2);
```

--------------------------------

### Provide Options to showActionSheetWithOptions

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/troubleshooting.md

Ensure that the options array passed to showActionSheetWithOptions is not empty. At least one option string must be provided.

```typescript
// Wrong
showActionSheetWithOptions(
  { options: [] }, // Empty array
  (index) => {}
);

// Correct
showActionSheetWithOptions(
  { options: ['Option 1', 'Option 2'] },
  (index) => {}
);
```

--------------------------------

### Screen Reader Focus Flow

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/architecture.md

Illustrates the sequence of events when autoFocus is enabled, leading to screen reader announcement of the first button.

```text
ActionGroup renders first button
  ↓
ref created for first button element
  ↓
ComponentDidMount: focusViewOnRender called
  ↓
findNodeHandle retrieves React tag
  ↓
UIManager.sendAccessibilityEvent (Android)
  or AccessibilityInfo.setAccessibilityFocus (Web/iOS)
  ↓
Screen reader announces first button
```

--------------------------------

### Using ActionSheetProvider with Custom Action Sheet

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/CustomActionSheet.md

Demonstrates how to wrap your application with ActionSheetProvider and enable the use of CustomActionSheet by setting `useCustomActionSheet` to true. This is typically done for Android and Web, or iOS when a custom implementation is preferred.

```typescript
import { ActionSheetProvider } from '@expo/react-native-action-sheet';

// On Android/Web, CustomActionSheet is used automatically
// On iOS with useCustomActionSheet={true}, CustomActionSheet is used instead of native

export default function App() {
  return (
    <ActionSheetProvider useCustomActionSheet={true}>
      <YourApp />
    </ActionSheetProvider>
  );
}
```

--------------------------------

### Provide Context with Title and Message

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/troubleshooting.md

Always include 'title' and 'message' properties when calling `showActionSheetWithOptions` to provide context for screen reader users. This is crucial for accessibility.

```typescript
showActionSheetWithOptions(
  {
    options: ['Edit', 'Delete', 'Cancel'],
    // No title or message!
  },
  (index) => {}
);

showActionSheetWithOptions(
  {
    options: ['Edit', 'Delete', 'Cancel'],
    title: 'Choose Action',
    message: 'What would you like to do?',
  },
  (index) => {}
);
```

--------------------------------

### Action Sheet Configuration

Source: https://github.com/expo/react-native-action-sheet/blob/master/README.md

This section details the props available for configuring the action sheet component. These props allow customization of button titles, colors, messages, and more.

```APIDOC
## Universal Props

### Description
Props that apply to all platforms (iOS, Android, Web).

### Parameters
#### Props
- **options** (array of strings) - Required - A list of button titles.
- **cancelButtonIndex** (number) - Optional - Index of cancel button in options.
- **cancelButtonTintColor** (string) - Optional - Color used for the change the text color of the cancel button.
- **destructiveButtonIndex** (number or array of numbers) - Optional - Indices of destructive buttons in options.
- **title** (string) - Optional - Title to show above the action sheet.
- **message** (string) - Optional - Message to show below the title.
- **tintColor** (string) - Optional - Color used for non-destructive button titles.
- **disabledButtonIndices** (array of numbers) - Optional - Indices of disabled buttons in options.

## iOS Only Props

### Description
Props that are specific to the iOS platform.

### Parameters
#### Props
- **anchor** (number) - Optional - iPad only option that allows for docking the action sheet to a node.
- **userInterfaceStyle** (string) - Optional - The interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used.

## Custom Action Sheet Only (Android/Web) Props

### Description
Props that allow modification of the Android ActionSheet. They have no effect on the look on iOS.

### Parameters
#### Props
- **icons** (array of required images or icons) - Optional - Show icons to go along with each option.
- **tintIcons** (boolean) - Optional - Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image.
```

--------------------------------

### Android/Web Styled Action Sheet Configuration

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/configuration.md

Configures an action sheet with Android and Web specific styling, including icons, text styles, and container styles.

```typescript
const options = {
  options: ['Share', 'Bookmark', 'Report', 'Cancel'],
  title: 'Share Article',
  message: 'Select an action',
  
  // Icons (Android/Web only)
  icons: [
    <MaterialIcons name="share" size={24} />,
    <MaterialIcons name="bookmark" size={24} />,
    <MaterialIcons name="flag" size={24} />,
  ],
  tintIcons: true,
  
  // Styling (Android/Web only)
  textStyle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#222',
  },
  titleTextStyle: {
    fontSize: 20,
    fontWeight: '700',
    color: '#000',
  },
  messageTextStyle: {
    fontSize: 14,
    color: '#666',
  },
  containerStyle: {
    backgroundColor: '#fff',
  },
  
  // Button configuration
  cancelButtonIndex: 3,
  tintColor: '#007AFF',
  
  // Separators
  showSeparators: true,
  separatorStyle: {
    backgroundColor: '#e0e0e0',
    height: 1,
  },
};
```

--------------------------------

### TouchableNativeFeedbackSafe Class Signature

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/TouchableNativeFeedbackSafe.md

This snippet shows the static methods available on the TouchableNativeFeedbackSafe class, which are used to configure background effects.

```APIDOC
## Class Signature

```typescript
class TouchableNativeFeedbackSafe extends React.Component<Props> {
  static SelectableBackground: () => Object;
  static SelectableBackgroundBorderless: () => Object;
  static Ripple: (color: string, borderless?: boolean) => Object;
}
```
```

--------------------------------

### ActionSheetIOSOptions

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/types.md

iOS-only configuration options for the ActionSheet. These options work with the native iOS ActionSheet.

```APIDOC
## ActionSheetIOSOptions

### Description
iOS-only configuration options for the ActionSheet. These options work with the native iOS ActionSheet.

### Fields
#### `options`
- **Type**: `string[]`
- **Required**: Yes
- **Default**: `—`
- **Description**: Array of button titles. The first item is typically the primary/destructive action.

#### `title`
- **Type**: `string`
- **Required**: No
- **Default**: `undefined`
- **Description**: Title text displayed above the options.

#### `message`
- **Type**: `string`
- **Required**: No
- **Default**: `undefined`
- **Description**: Message text displayed below the title.

#### `tintColor`
- **Type**: `string`
- **Required**: No
- **Default**: `undefined`
- **Description**: Color for non-destructive button titles (hex color code, e.g., `'#007AFF'`).

#### `cancelButtonIndex`
- **Type**: `number`
- **Required**: No
- **Default**: `undefined`
- **Description**: Zero-based index of the cancel button. On iOS, this is typically the last item.

#### `cancelButtonTintColor`
- **Type**: `string`
- **Required**: No
- **Default**: `undefined`
- **Description**: Color specifically for the cancel button (hex color code).

#### `destructiveButtonIndex`
- **Type**: `number | number[]`
- **Required**: No
- **Default**: `undefined`
- **Description**: Index or array of indices for destructive buttons (rendered in red on iOS).

#### `anchor`
- **Type**: `number`
- **Required**: No
- **Default**: `undefined`
- **Description**: iPad only. React node handle for positioning the ActionSheet as a popover. Use `findNodeHandle()` to obtain.

#### `userInterfaceStyle`
- **Type**: `'light' | 'dark'`
- **Required**: No
- **Default**: `undefined`
- **Description**: iOS interface style for the ActionSheet. Either `'light'` or `'dark'`. Default uses system style.

#### `disabledButtonIndices`
- **Type**: `number[]`
- **Required**: No
- **Default**: `undefined`
- **Description**: Array of indices for buttons that should be disabled (unselectable).
```

--------------------------------

### ActionSheet Icon Rendering Rules

Source: https://github.com/expo/react-native-action-sheet/blob/master/_autodocs/api-reference/ActionGroup.md

Outlines the rules for rendering icons within ActionSheet buttons, including handling of `require()` images, JSX components, and null/undefined values.

```text
| Type | Handling |
|------|----------|
| `require()` image | Rendered as `<Image>`, tinted if `tintIcons={true}`, resized to contain |
| JSX component | Rendered as-is in a 24x24 View |
| `null` or `undefined` | Skipped (no icon space) |
| Fade duration | Set to 0 for instant display |
```