### Install ActionSheet with bun

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Use this command to install the main library with bun.

```bash
bun add react-native-actions-sheet
```

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

### Install ActionSheet with pnpm

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Use this command to install the main library with pnpm.

```bash
pnpm add react-native-actions-sheet
```

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

### Install react-native-actions-sheet

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Install the library and its peer dependencies using yarn.

```bash
yarn add react-native-actions-sheet react-native-reanimated react-native-gesture-handler react-native-safe-area-context
```

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

### Install ActionSheet with npm

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Use this command to install the main library with npm.

```bash
npm install react-native-actions-sheet
```

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

### Install ActionSheet with yarn

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Use this command to install the main library with yarn.

```bash
yarn add react-native-actions-sheet
```

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

### Install Dependencies with bun

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Install the required peer dependencies for ActionSheet using bun.

```bash
bun add react-native-reanimated react-native-gesture-handler react-native-safe-area-context
```

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

### Install Dependencies with pnpm

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Install the required peer dependencies for ActionSheet using pnpm.

```bash
pnpm add react-native-reanimated react-native-gesture-handler react-native-safe-area-context
```

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

### Install Dependencies for v10.0.0

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/migrate.mdx

Install react-native-reanimated and react-native-safe-area-context as peer dependencies for v10.0.0.

```bash
npm install react-native-reanimated react-native-safe-area-context
```

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

### Install Dependencies with npm

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Install the required peer dependencies for ActionSheet using npm.

```bash
npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context
```

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

### Install Dependencies with yarn

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/installation.mdx

Install the required peer dependencies for ActionSheet using yarn.

```bash
yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context
```

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

### Start Metro Bundler

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/example/README.md

Run this command to start the Metro JavaScript bundler, which is essential for React Native development.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

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

### Install react-native-gesture-handlers

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/migrate.mdx

Install react-native-gesture-handlers as a dependency for v0.9.0, which is often already present in React Native projects.

```bash
npm install react-native-gesture-handlers
```

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

### Install CocoaPods Dependencies

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/example/README.md

Before running the iOS app, install the necessary CocoaPods dependencies. This is typically done once or after updating native dependencies.

```sh
bundle install

bundle exec pod install
```

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

### useSheetRef Usage

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/usesheetref.mdx

This snippet demonstrates how to use the `useSheetRef` hook to get a sheet's reference and call methods on it.

```APIDOC
## useSheetRef

Returns the current sheet's [ref](./actionsheetref.mdx).

```ts
// Some where in your sheet's component tree.
const ref = useSheetRef("example-sheet");

// Use methods on the current sheet.
ref.hide();
```
```

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

### ConfirmSheet Component Implementation

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/getdata.mdx

Implement the ActionSheet component, handling user interactions to hide the sheet and return a value. This example shows a confirmation sheet with 'Yes' and 'No' buttons.

```tsx
function ConfirmSheet(props: SheetProps<"confirm-sheet">) {
  return (
    <ActionSheet id={props.sheetId}>
      <Text
        style={{
          marginBottom: 10,
          color: 'black',
        }}>
        {props.payload?.message}
      </Text>
      <Button
        title="No"
        onPress={() => {
          SheetManager.hide(props.sheetId, {
            payload: false,
          });
        }}
      />
      <Button
        title="Yes"
        onPress={() => {
          SheetManager.hide(props.sheetId, {
            payload: true,
          });
        }}
      />
    </ActionSheet>
  );
}
```

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

### useScrollHandlers Usage

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/usescrollhandlers.mdx

This example demonstrates how to use the `useScrollHandlers` hook with a `ScrollView` inside an `ActionSheet`. The hook provides necessary props to the `ScrollView` and integrates with `NativeViewGestureHandler` for smooth gesture handling.

```APIDOC
## useScrollHandlers

Create a custom scrollable view inside the action sheet. The scrollable view must implement `onScroll`, and `onLayout` props.

### Parameters

`options`

A unique id for the `ScrollView` or `FlatList`. This id has to be unique per action sheet component.

| Type                                           | Required |
| ---------------------------------------------- | -------- |
| [DraggableNodeOptions](./draggablenodeoptions) | false    |

### Request Example

```tsx
import {ScrollView} from 'react-native';
import ActionSheet, {useScrollHandlers} from 'react-native-actions-sheet';
import {NativeViewGestureHandler} from 'react-native-gesture-handler';

const ExampleSheet = () => {
  const handlers = useScrollHandlers();
  return (
    <ActionSheet>
      <NativeViewGestureHandler
        simultaneousHandlers={handlers.simultaneousHandlers}>
        <ScrollView {...handlers}></ScrollView>
      </NativeViewGestureHandler>
    </ActionSheet>
  );
};
```

### Callout

Internally the hook simply provides information about the ScrollView layout & it's current position based on which the action sheet decides whether scrolling should be enabled or not.
```

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

### Show ActionSheet and Get Result

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/getdata.mdx

Use `SheetManager.show` to display an ActionSheet and await its result. The result is passed via the `payload` argument in `SheetManager.hide`.

```typescript
async function openExternalLink(link: string) {
  const canOpen = await SheetManager.show('confirm-sheet', {
    payload: {
      message: `Do you want to open ${link} in your phone browser?`,
    },
  });
  if (canOpen) {
    Linking.openUrl(link);
  }
}
```

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

### Get and Use Sheet Ref

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/usesheetref.mdx

Obtain the sheet's ref and call methods like `hide()` on it. Ensure the hook is called within your sheet's component tree.

```typescript
const ref = useSheetRef("example-sheet");

ref.hide();
```

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

### Track Action Sheet Position with onChange

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/position.mdx

Use the `onChange` prop to get the current position of the action sheet. This allows you to perform actions when the sheet reaches a specific position, such as the top.

```tsx
<ActionSheet
  onChange={(position) => {
    const hasReachedTop = position === 100;
    if (hasReachedTop) {
      // Do something
    }
  }}
/>
```

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

### Get Action Sheet Ref

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/sheetmanager.mdx

Retrieves the internal ref for a specific action sheet, allowing direct invocation of its methods like `snapToOffset`. Optionally specify a context for sheets within custom `SheetProvider`s.

```typescript
SheetManager.get('example-sheet')?.snapToOffset(25);
// or inside some modal with it's own `SheetProvider`
SheetManager.get('example-sheet', 'local-context')?.snapToOffset(25);
```

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

### Define and Navigate Routes in ActionSheet

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/sheetrouter.mdx

This snippet demonstrates setting up routes for an ActionSheet and navigating between them using `router.navigate` and `router.goBack`. It includes defining route components and the route configuration array.

```tsx
import ActionSheet, {
  Route,
  RouteScreenProps,
  useSheetRouter,
  useSheetRouteParams,
} from 'react-native-actions-sheet';

const RouteA = ({router}: RouteScreenProps<"sheet-with-router", "route-a">) => {
  return (
    <View>
      <Button
        title="Go to Route B"
        onPress={() => {
          router.navigate('route-b', {data: 'test'});
        }}
      />
    </View>
  );
};

const RouteB = () => {
  const router = useSheetRouter("sheet-with-router");
  const params = useSheetRouteParams("sheet-with-router", "route-b");

  return (
    <View>
      <Button
        title="Go Back to Route A"
        onPress={() => {
          router.goBack();
        }}
      />
    </View>
  );
};

const routes: Route[] = [
  {
    name: 'route-a',
    component: RouteA,
  },
  {
    name: 'route-b',
    component: RouteB,
  },
];

function SheetWithRouter(props: SheetProps) {
  return (
    <ActionSheet
      enableRouterBackNavigation={true}
      routes={routes}
      initialRoute="route-a"
    />
  );
}

export default SheetWithRouter;
```

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

### Basic ActionSheet Component Usage

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Demonstrates how to use the ActionSheet component with a ref for direct imperative control. Configure snap points, gestures, and callbacks.

```tsx
import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';

export default function MyScreen() {
  const sheetRef = useRef<ActionSheetRef>(null);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="Open Sheet" onPress={() => sheetRef.current?.show()} />

      <ActionSheet
        ref={sheetRef}
        gestureEnabled={true}
        snapPoints={[40, 70, 100]}
        initialSnapIndex={0}
        springOffset={50}
        overdrawEnabled={true}
        defaultOverlayOpacity={0.4}
        closeOnTouchBackdrop={true}
        drawUnderStatusBar={false}
        useBottomSafeAreaPadding={true}
        containerStyle={{ backgroundColor: '#fff', borderRadius: 16 }}
        openAnimationConfig={{ damping: 110, mass: 4, stiffness: 900 }}
        onOpen={() => console.log('sheet opened')}
        onClose={(data) => console.log('sheet closed with', data)}
        onChange={(position) => console.log('visible %:', position)}
        onSnapIndexChange={(index) => console.log('snapped to', index)}
      >
        <View style={{ padding: 24 }}>
          <Text style={{ fontSize: 18, fontWeight: '600' }}>Hello from ActionSheet</Text>
          <Button title="Close" onPress={() => sheetRef.current?.hide()} />
          <Button title="Snap to 70%" onPress={() => sheetRef.current?.snapToOffset(70)} />
          <Button title="Snap to index 2" onPress={() => sheetRef.current?.snapToIndex(2)} />
        </View>
      </ActionSheet>
    </View>
  );
}
```

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

### ShowOptions Parameters

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/showoptions.mdx

Details the parameters available for configuring the display and behavior of ActionSheets.

```APIDOC
## ShowOptions Parameters

### `payload`

Any data that you want the action sheet to receive before it opens. This data will be available in `props` of the action sheet component or in the `onBeforeShow` prop on the `ActionSheet` before the action sheet is presented to the user.

- **Type**: `any`
- **Required**: `false`

### `context`

Provide the context of the `SheetProvider` where you want to present the action sheet.

- **Type**: `string`
- **Required**: `false`

### `overrideProps`

Override a ActionSheet's props that were defined when the component was declared.

```tsx
function ExampleSheet(props: SheetProps<'example-sheet'>) {
  return (
    <ActionSheet
      disableElevation={true}
      gestureEnabled
      {...props.overrideProps}
    />
  );
}
```

- **Type**: `ActionSheetProps` (from `/reference/actionsheet`)
- **Required**: `false`

### `onClose`

A callback function that is called when the action sheet closes.

- **Parameters**:
  - `data` (any): Any data that is sent from the `hide` function of `SheetManager` can be received here.
  - `snapIndex` (number): Set the snap point for the action sheet on open.
- **Required**: `false`
```

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

### Show Action Sheet

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

Use the `show` method on the ref to display the action sheet.

```ts
ref.current?.show();
```

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

### show

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

Displays the action sheet to the user.

```APIDOC
## show

### Description
Show the action sheet.

### Method
`show()`

### Endpoint
N/A (Method call)

### Parameters
None

### Request Example
```ts
ref.current?.show();
```

### Response
None
```

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

### Register Sheets with SheetRegister Component

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/migrate.mdx

Use the new SheetRegister component to easily register multiple sheets in one place, starting from v10.0.0.

```typescript
import {SheetRegister} from 'react-native-actions-sheet';
import ExampleSheet from 'example-sheet.tsx';

export const Sheets = () => {
  return <SheetRegister sheets={{'example-sheet': ExampleSheet}} />
}
```

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

### Use Sheet ID for Intellisense

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/migrate.mdx

Define the exact sheet ID directly in the ActionSheet component to get intellisense for payload/returnValue, as demonstrated in v0.9.0.

```tsx
<ActionSheet
  id="example-sheet"
  onClose={data => {
    // data is fully typed based on SheetDefinition of example-sheet.
  }}
/>
```

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

### Build and Run iOS App

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/example/README.md

Execute this command to build and run your React Native application on an iOS simulator or device.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

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

### Access ActionSheet in Specific SheetProvider

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/refaccess.mdx

When multiple SheetProviders are present, specify the context to get a ref to an action sheet within a particular provider. This ensures you target the correct sheet.

```typescript
SheetManager.get('example-sheet', 'local-context').snapToOffset(50);
```

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

### ActionSheet Component Usage

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Demonstrates how to use the ActionSheet component with a ref for imperative control, including common props and event handlers.

```APIDOC
## ActionSheet Component

The default export `ActionSheet` is the core bottom-sheet UI component. It accepts children and an extensive set of props for controlling animation, gestures, snap points, styling, and lifecycle callbacks. Use a `ref` for direct imperative control, or assign an `id` to integrate with `SheetManager`.

### Usage Example

```tsx
import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';

export default function MyScreen() {
  const sheetRef = useRef<ActionSheetRef>(null);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="Open Sheet" onPress={() => sheetRef.current?.show()} />

      <ActionSheet
        ref={sheetRef}
        gestureEnabled={true}
        snapPoints={[40, 70, 100]}
        initialSnapIndex={0}
        springOffset={50}
        overdrawEnabled={true}
        defaultOverlayOpacity={0.4}
        closeOnTouchBackdrop={true}
        drawUnderStatusBar={false}
        useBottomSafeAreaPadding={true}
        containerStyle={{ backgroundColor: '#fff', borderRadius: 16 }}
        openAnimationConfig={{ damping: 110, mass: 4, stiffness: 900 }}
        onOpen={() => console.log('sheet opened')}
        onClose={(data) => console.log('sheet closed with', data)}
        onChange={(position) => console.log('visible %:', position)}
        onSnapIndexChange={(index) => console.log('snapped to', index)}
      >
        <View style={{ padding: 24 }}>
          <Text style={{ fontSize: 18, fontWeight: '600' }}>Hello from ActionSheet</Text>
          <Button title="Close" onPress={() => sheetRef.current?.hide()} />
          <Button title="Snap to 70%" onPress={() => sheetRef.current?.snapToOffset(70)} />
          <Button title="Snap to index 2" onPress={() => sheetRef.current?.snapToIndex(2)} />
        </View>
      </ActionSheet>
    </View>
  );
}
```
```

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

### Set up SheetProvider for Global and Scoped Sheets

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Wrap your app with SheetProvider to enable SheetManager. Use unique contexts for nested providers, such as within modals.

```tsx
import React from 'react';
import { SheetProvider } from 'react-native-actions-sheet';
import { Sheets } from './sheets'; // your registration file
import MainNavigator from './MainNavigator';

export default function App() {
  return (
    // Global provider — wraps the entire app
    <SheetProvider context="global">
      <Sheets />
      <MainNavigator />
    </SheetProvider>
  );
}

// Inside a React Native Modal — use a nested provider with a unique context
import { Modal } from 'react-native';
import { SheetProvider } from 'react-native-actions-sheet';

function MyModal({ visible }: { visible: boolean }) {
  return (
    <Modal visible={visible} transparent animationType="slide">
      <SheetProvider context="modal-context">
        {/* sheets registered under "modal-context" render here *//*}
      </SheetProvider>
    </Modal>
  );
}
```

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

### Get a sheet's ActionSheetRef

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Use SheetManager.get to retrieve the imperative ActionSheetRef for a registered sheet by its id. This allows direct control over the sheet, such as snapping to points or checking its open state.

```tsx
import { SheetManager } from 'react-native-actions-sheet';

const ref = SheetManager.get('confirm-sheet');
ref?.current?.snapToIndex(1);
ref?.current?.snapToOffset(80);
console.log('Is open:', ref?.current?.isOpen());
```

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

### useBottomSafeAreaPadding

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Applies padding to the bottom of the action sheet based on the device's safe area insets. Defaults to false.

```APIDOC
## `useBottomSafeAreaPadding`

### Description
Apply padding to bottom based on device safe area insets.

### Type
`boolean`

### Required
no

### Default
`false`
```

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

### Build and Run Android App

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/example/README.md

Execute this command to build and run your React Native application on an Android device or emulator.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

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

### Access ActionSheet Ref in Components

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/refaccess.mdx

Within React components, use the useSheetRef hook to get a reference to an action sheet. This allows direct manipulation of the sheet's state and behavior.

```typescript
const ref = useSheetRef("example-sheet");

ref.snapToOffset(50);
ref.hide();
```

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

### Snap to Index

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

When multiple snap points are configured, use `snapToIndex` to move the action sheet to a specific snap point by its index.

```ts
ref.current?.snapToIndex(1);
```

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

### Get Active Sheets

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/sheetmanager.mdx

Retrieves an array of all currently active sheets matching the provided ID. Each item in the array contains the sheet's ref, allowing for programmatic interaction with active instances.

```typescript
const activeSheets = SheetManager.getActiveSheets('example-sheet');
for (const sheet of activeSheets) {
  if (sheet.ref.current.currentPayload().id === 'custom-id') {
    sheet.ref.current.hide();
  }
}
```

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

### Snap to Offset

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

Use `snapToOffset` to position the action sheet at a specific percentage between 0 and 100.

```ts
ref.current?.snapToOffset(20);
```

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

### Define ActionSheet Return Types

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/getdata.mdx

Define the expected return type for your ActionSheet in the `Sheets` interface to ensure type safety. This example shows how to define a boolean return value for a confirmation sheet.

```typescript
import {SheetDefinition, registerSheet} from 'react-native-actions-sheet';

registerSheet("confirm-sheet", ExampleSheet);

declare module 'react-native-actions-sheet' {
  interface Sheets {
    'confirm-sheet': SheetDefinition<{
      payload: {
        message: string
      }
      returnValue: boolean;
    }>;
  }
}
```

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

### Show ActionSheet Programmatically

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/usage.mdx

Call the `show` method on the ActionSheet's ref to present it to the user. This is typically done in response to a user action, like a button press.

```ts
actionSheetRef.current?.show();
```

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

### Wrap App with SheetProvider

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/sheetmanager.mdx

In your `App.tsx`, import the `Sheets` component and wrap your application with `SheetProvider` to enable SheetManager functionality.

```tsx
import {SheetProvider} from 'react-native-actions-sheet';
import { Sheets } from 'sheets.tsx';

function App() {
  return (
    <SheetProvider>
      <Sheets />
      {
        // your app components
      }
    </SheetProvider>
  );
}
```

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

### Import ActionSheet

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/sheetmanager.mdx

Import the ActionSheet component to use it in your project.

```tsx
import ActionSheet from 'react-native-actions-sheet';
```

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

### Get the sheet's ref with useSheetRef hook

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

The useSheetRef hook provides the ActionSheetRef for the current sheet, enabling imperative control from deep within its component tree without prop drilling. This is useful for actions like snapping or hiding the sheet.

```tsx
import React from 'react';
import { View, Button } from 'react-native';
import ActionSheet, { SheetProps, useSheetRef } from 'react-native-actions-sheet';

function DeepChildControls() {
  // Gets the ref of the enclosing ActionSheet automatically
  const sheetRef = useSheetRef<'confirm-sheet'>();

  return (
    <View>
      <Button title="Snap to 50%" onPress={() => sheetRef.current?.snapToOffset(50)} />
      <Button title="Close" onPress={() => sheetRef.current?.hide()} />
    </View>
  );
}

function ConfirmSheet(props: SheetProps<'confirm-sheet'>) {
  return (
    <ActionSheet id={props.sheetId} snapPoints={[50, 100]}> <View style={{ padding: 24 }}>
        {/* DeepChildControls can control the sheet without receiving ref as prop */}
        <DeepChildControls />
      </View>
    </ActionSheet>
  );
}
```

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

### routes

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

An array of route configurations for the action sheet, if it utilizes routing. Each element should conform to the `Route[]` type.

```APIDOC
## `routes`

### Description
A list of routes for this actions sheet if any.

### Type
`Route[]`

### Required
no
```

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

### onOpen

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

A callback function that is executed when the action sheet is opened.

```APIDOC
## `onOpen`

### Description
A function called when the action sheet opens.

### Type
`function`

### Required
no
```

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

### defaultOverlayOpacity

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Sets the default opacity for the backdrop overlay, ranging from 0 to 1. Defaults to 0.3.

```APIDOC
## `defaultOverlayOpacity`

### Description
Default opacity of the overlay/backdrop.

### Type
`number 0 - 1`

### Required
no

### Default
`0.3`
```

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

### onNavigate

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

A callback function that is triggered when navigation occurs within the action sheet's stack. It receives the target route string as an argument.

```APIDOC
## `onNavigate(route: string)`

### Description
An event called when navigating to a route in stack

### Type
`function`

### Required
no
```

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

### Use Bottom SafeArea Padding

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/safearea.mdx

Use `useBottomSafeAreaPadding` to ensure content is not hidden under the navigation bar on mobile devices. It calculates bottom padding based on the top padding.

```tsx
<ActionSheet useBottomSafeAreaPadding />
```

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

### Wrap App with SheetProvider and Import Sheets

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/migrate.mdx

In your App.tsx, import the Sheets component and wrap your application with SheetProvider to enable action sheet functionality.

```tsx
import {SheetProvider} from 'react-native-actions-sheet';
import {Sheets} from 'sheets.tsx';

function App() {
  return (
    <SheetProvider>
      <Sheets />
      {
        // your app components
      }
    </SheetProvider>
  );
}
```

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

### Import ActionSheet Component

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/usage.mdx

Import the ActionSheet component and its associated ref type from the library. This is the first step to using ActionSheet in your project.

```tsx
import ActionSheet, { ActionSheetRef } from "react-native-actions-sheet";
```

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

### Show Sheets Imperatively with SheetManager.show

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Open registered sheets from anywhere using SheetManager.show. It returns a Promise resolving with the sheet's returnValue. Supports payloads, callbacks, contexts, and snap points.

```typescript
import { SheetManager } from 'react-native-actions-sheet';

// Basic show
SheetManager.show('confirm-sheet');

// With typed payload (TypeScript infers types from SheetDefinition)
const confirmed = await SheetManager.show('confirm-sheet', {
  payload: { message: 'Delete this item?' },
});
if (confirmed) {
  console.log('User confirmed deletion');
}

// With onClose callback and specific context
SheetManager.show('profile-sheet', {
  payload: { userId: 'user-42' },
  context: 'modal-context',
  onClose: (data) => console.log('Profile sheet closed', data),
});

// Open at a specific snap point index
SheetManager.show('confirm-sheet', { snapIndex: 1 });

// Chaining multiple sheets
async function multiStepFlow() {
  const step1 = await SheetManager.show('step-one-sheet');
  if (!step1) return;
  const step2 = await SheetManager.show('step-two-sheet', {
    payload: { fromStep1: step1 },
  });
  console.log('Flow complete', step2);
}
```

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

### Integrate FlashList with ActionSheet

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/flashlist.mdx

Import ActionSheet and FlashList, then use FlashList as a child of ActionSheet, passing ScrollView as the renderScrollComponent prop.

```tsx
import ActionSheet, {ScrollView} from 'react-native-actions-sheet';
import {FlashList} from '@shopify/flash-list';

const ExampleSheet = () => {
  return (
    <ActionSheet>
      <FlashList renderScrollComponent={ScrollView} />
    </ActionSheet>
  );
};

```

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

### Registering an Action Sheet

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/registersheet.mdx

Use this function to register a new action sheet. Provide a unique ID, the component for the sheet, and optionally, the contexts where it should be available. If no contexts are provided, it defaults to the 'global' context.

```tsx
registerSheet("example-sheet", ExampleSheet, "global", "local-context");
```

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

### onBeforeShow

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

A callback function that is invoked just before the action sheet is prepared to be displayed.

```APIDOC
## `onBeforeShow(data:any)`

### Description
A function called just before the action sheet is ready to be shown.

### Type
`function`

### Required
no
```

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

### onNavigateBack

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

A callback function that is triggered when navigating back within the action sheet's stack. It receives the previous route string as an argument.

```APIDOC
## `onNavigateBack(route: string)`

### Description
An event called when navigating back in stack.

### Type
`function`

### Required
no
```

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

### Show Sheet with Specific Context

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/migrate.mdx

When opening a sheet, specify the desired context using the `context` option.

```ts
SheetManager.show('sheet-id', {
  context: 'context-b',
});
```

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

### snapToOffset

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

Snaps the action sheet to a specific offset percentage.

```APIDOC
## snapToOffset

### Description
Provide a value between `0` to `100` for the action sheet to snap to.

### Method
`snapToOffset(offset: number)`

### Endpoint
N/A (Method call)

### Parameters
#### Parameters
- **offset** (number) - Required - A value between 0 to 100.

### Request Example
```ts
ref.current?.snapToOffset(20);
```

### Response
None
```

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

### ActionSheet Props

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Configuration options for the ActionSheet component.

```APIDOC
## `initialRoute`

Initial route to navigate to when the sheet opens.

| Type   | Required |
| ------ | -------- |
| string | no       |

## `enableRouterBackNavigation`

Enable back navigation for router when pressing hardware back button or touching the back drop. Remember that swiping down the sheet will still close the sheet regardless of the route in stack.

| Type    | Required |
| ------- | -------- |
| boolean | no       |

## `backdropProps`

An object containing props for the backdrop layer. Used to provide accessibility props.

| Type   | Required |
| ------ | -------- |
| object | no       |

## `onTouchBackdrop`

A callback that gets invoked when user taps on the backdrop area.

| Type     | Required |
| -------- | -------- |
| function | no       |

## `safeAreaInsets`

Default safeArea insets provided through a library such as `react-native-safe-area-insets`. This also helps in giving a tiny boost in performance as the sheet does not have to calculate insets anymore.

| Type   | Required |
| ------ | -------- |
| object | no       |

## `enableGesturesInScrollView`

Enable swipe gestures inside ScrollView/FlatList. Enabled by default.

| Type    | Required |
| ------- | -------- |
| boolean | no       |

## `onSnapIndexChange`

Callback invoked when the snap position of the sheet changes.

| Type     | Required |
| -------- | -------- |
| function | no       |

## `initialTranslateFactor`

Set the initial translate factor of the action sheet when it opens. Default is `1` which means the action sheet will open from bottom of the screen. You can set it to `0.5` to have it open from half way of the screen.

| Type   | Required |
| ------ | -------- |
| number | no       |

Default: `1`

## `disableElevation`

Disable elevation/shadow of the action sheet.
| Type | Required |
| --------- | -------- |
| `boolean` | no |

## `onRequestClose`

Called when the ActionSheet is closing based on some user actions:

Touching backdrop
System back navigation
Swiping down to close the ActionSheet

Return `false` to cancel closing the ActionSheet.

| Type                                  | Required |
| ------------------------------------- | -------- |
| `(type: CloseRequestType) => boolean` | no       |
```

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

### isOpen

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

Checks if the action sheet is currently open or closed.

```APIDOC
## isOpen

### Description
Check if the action sheet is open or closed.

### Method
`isOpen(): boolean`

### Endpoint
N/A (Method call)

### Parameters
None

### Response
#### Success Response (boolean)
- **isOpen** (boolean) - True if the action sheet is open, false otherwise.
```

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

### onBeforeClose

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

A callback function that is invoked just before the action sheet begins to close.

```APIDOC
## `onBeforeClose(data:any)`

### Description
A function called just before the action sheet is closing.

### Type
`function`

### Required
no
```

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

### drawUnderStatusBar

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Specifies whether the action sheet container should be drawn beneath the system status bar. Defaults to false.

```APIDOC
## `drawUnderStatusBar`

### Description
Draw action sheet container under the status bar.

### Type
`boolean`

### Required
no

### Default
`false`
```

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

### SheetManager.show

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Imperatively opens any registered sheet from anywhere in the app. It returns a Promise that resolves with the sheet's returnValue when it closes. Optional parameters include payload, onClose callback, context, overrideProps, and snapIndex.

```APIDOC
## SheetManager.show

Imperatively open any registered sheet from anywhere in the app. Returns a `Promise` that resolves with the sheet's `returnValue` when it closes. Accepts optional `payload`, `onClose` callback, `context`, `overrideProps`, and `snapIndex`.

```tsx
import { SheetManager } from 'react-native-actions-sheet';

// Basic show
SheetManager.show('confirm-sheet');

// With typed payload (TypeScript infers types from SheetDefinition)
const confirmed = await SheetManager.show('confirm-sheet', {
  payload: { message: 'Delete this item?' },
});
if (confirmed) {
  console.log('User confirmed deletion');
}

// With onClose callback and specific context
SheetManager.show('profile-sheet', {
  payload: { userId: 'user-42' },
  context: 'modal-context',
  onClose: (data) => console.log('Profile sheet closed', data),
});

// Open at a specific snap point index
SheetManager.show('confirm-sheet', { snapIndex: 1 });

// Chaining multiple sheets
async function multiStepFlow() {
  const step1 = await SheetManager.show('step-one-sheet');
  if (!step1) return;
  const step2 = await SheetManager.show('step-two-sheet', {
    payload: { fromStep1: step1 },
  });
  console.log('Flow complete', step2);
}
```
```

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

### Register ActionSheet

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/sheetmanager.mdx

Create a `sheets.tsx` file to register your ActionSheet components with SheetManager. This allows for type safety and autocompletion.

```tsx
import {SheetRegister, SheetDefinition} from 'react-native-actions-sheet';
import ExampleSheet from 'example-sheet.tsx';


// We extend some of the types here to give us great intellisense
// across the app for all registered sheets.
declare module 'react-native-actions-sheet' {
  interface Sheets {
    'example-sheet': SheetDefinition;
  }
}

export const Sheets = () => {
  return <SheetRegister sheets={{'example-sheet': ExampleSheet}} />
}
```

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

### Route Component Properties

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/route.mdx

Defines the properties for a single route in the navigation stack.

```APIDOC
## Route Properties

### `name`

A unique identifier for the route.

- **Type**: string
- **Required**: true

### `component`

The React component to be rendered when this route is active.

- **Type**: React Component
- **Required**: true

### `params`

Initial parameters to be passed to the route when it is navigated to.

- **Type**: any
- **Required**: false
```

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

### Context Option

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/updateoptions.mdx

The `context` option specifies the context of the `SheetProvider` where the action sheet should be presented.

```APIDOC
## context

Provide the context of the `SheetProvider` where you want to present the action sheet.

| Type     | Required |
| -------- | -------- |
| `string` | false    |
```

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

### Use Built-in FlatList with ActionSheet

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Employ the pre-wired `FlatList` component for gesture coordination within `ActionSheet`. It accepts all standard `FlatListProps` and an optional `refreshControlGestureArea`.

```tsx
import React from 'react';
import { View, Text } from 'react-native';
import ActionSheet, { FlatList } from 'react-native-actions-sheet';

type Item = { id: string; title: string };

const DATA: Item[] = Array.from({ length: 50 }, (_, i) => ({
  id: `item-${i}`,
  title: `Item ${i + 1}`,
}));

function LargeListSheet() {
  return (
    <ActionSheet gestureEnabled snapPoints={[50, 100]} initialSnapIndex={0}>
      <FlatList<Item>
        data={DATA}
        keyExtractor={(item) => item.id}
        style={{ maxHeight: 450 }}
        renderItem={({ item }) => (
          <View style={{ padding: 16, borderBottomWidth: 1, borderColor: '#eee' }}>
            <Text>{item.title}</Text>
          </View>
        )}
      />
    </ActionSheet>
  );
}
```

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

### Integrating Sheets with SheetProvider

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/sheetregister.mdx

Wrap your application with SheetProvider and include the Sheets component to enable sheet functionality. Ensure Sheets is imported correctly.

```tsx
import {SheetProvider} from 'react-native-actions-sheet';
import {Sheets} from 'sheets.tsx';
function App() {
  return (
    <SheetProvider>
      <Sheets />
      {
        // your app components
      }
    </SheetProvider>
  );
}
```

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

### Built-in Router - useSheetRouter, useSheetRouteParams

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

ActionSheet provides a built-in stack router for managing multi-step flows within a single sheet. You can define routes, navigate between them using `router.navigate`, go back using `router.goBack`, and access type-safe parameters with `useSheetRouteParams`.

```APIDOC
## Built-in Router — routes, useSheetRouter, useSheetRouteParams

`ActionSheet` includes a lightweight stack router for multi-step flows within a single sheet. Define `routes`, navigate between them with `router.navigate`, and go back with `router.goBack`. Type-safe params are accessible via `useSheetRouteParams`.

```tsx
import React from 'react';
import { View, Text, Button } from 'react-native';
import ActionSheet, {
  SheetProps,
  Route,
  RouteDefinition,
  RouteScreenProps,
  SheetDefinition,
  useSheetRouter,
  useSheetRouteParams,
  registerSheet,
} from 'react-native-actions-sheet';

// ---- Type declarations ----
declare module 'react-native-actions-sheet' {
  interface Sheets {
    'wizard-sheet': SheetDefinition,{
      routes: {
        'step-one': RouteDefinition;
        'step-two': RouteDefinition<{ fromOne: string }>;
      };
    };
  }
}

// ---- Route components ----
function StepOne({ router }: RouteScreenProps<'wizard-sheet', 'step-one'>) {
  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontSize: 18 }}>Step 1</Text>
      <Button
        title="Next"
        onPress={() => router.navigate('step-two', { fromOne: 'hello' })}
      />
    </View>
  );
}

function StepTwo() {
  const router = useSheetRouter<'wizard-sheet'>();
  const params = useSheetRouteParams<'wizard-sheet', 'step-two'>();

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontSize: 18 }}>Step 2 — received: {params?.fromOne}</Text>
      <Button title="Back" onPress={() => router?.goBack()} />
      <Button title="Done" onPress={() => router?.close()} />
    </View>
  );
}

// ---- Sheet component ----
const routes: Route[] = [
  { name: 'step-one', component: StepOne },
  { name: 'step-two', component: StepTwo },
];

function WizardSheet(props: SheetProps<'wizard-sheet'>) {
  return (
    <ActionSheet
      id={props.sheetId}
      gestureEnabled
      routes={routes}
      initialRoute="step-one"
      enableRouterBackNavigation={true}
    />
  );
}

registerSheet('wizard-sheet', WizardSheet);
export default WizardSheet;

// ---- Open from anywhere ----
// SheetManager.show('wizard-sheet');
```
```

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

### statusBarTranslucent

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Determines if the modal should render underneath the system status bar. Defaults to true.

```APIDOC
## `statusBarTranslucent`

### Description
Determine whether the modal should go under the system statusbar.

### Type
`boolean`

### Required
no

### Default
`true`
```

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

### Render ActionSheet in Component

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/usage.mdx

Create an ActionSheet instance within your component and attach a ref to manage its state. Ensure the `gestureEnabled` prop is set if you want swipe gestures to control the sheet.

```tsx
function App() {
  const actionSheetRef = useRef<ActionSheetRef>(null);

  return (
    <ActionSheet gestureEnabled ref={actionSheetRef}>
      <Text>Hi, I am here.</Text>
    </ActionSheet>
  );
}
```

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

### Show Action Sheet with Result

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/sheetmanager.mdx

Shows an action sheet and waits for it to be closed, capturing any result returned. Useful for confirmation dialogs or actions that require user input.

```typescript
const confirmed = await SheetManager.show('confirm-sheet');
```

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

### overlayColor

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Specifies the color of the backdrop overlay. Defaults to 'black'.

```APIDOC
## `overlayColor`

### Description
Color of the overlay/backdrop.

### Type
`string`

### Required
no

### Default
`"black"`
```

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

### Built-in Router for Multi-Step Flows

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Implement multi-step flows within a single sheet using the built-in router. Define routes, navigate between them, and access type-safe parameters. Ensure all necessary components and types are imported.

```tsx
import React from 'react';
import { View, Text, Button } from 'react-native';
import ActionSheet, {
  SheetProps,
  Route,
  RouteDefinition,
  RouteScreenProps,
  SheetDefinition,
  useSheetRouter,
  useSheetRouteParams,
  registerSheet,
} from 'react-native-actions-sheet';

// ---- Type declarations ----
declare module 'react-native-actions-sheet' {
  interface Sheets {
    'wizard-sheet': SheetDefinition ({
      routes: {
        'step-one': RouteDefinition;
        'step-two': RouteDefinition ({ fromOne: string });
      };
    });
  }
}

// ---- Route components ----
function StepOne({ router }: RouteScreenProps<'wizard-sheet', 'step-one'>) {
  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontSize: 18 }}>Step 1</Text>
      <Button
        title="Next"
        onPress={() => router.navigate('step-two', { fromOne: 'hello' })}
      />
    </View>
  );
}

function StepTwo() {
  const router = useSheetRouter<'wizard-sheet'>();
  const params = useSheetRouteParams<'wizard-sheet', 'step-two'>();

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontSize: 18 }}>Step 2 — received: {params?.fromOne}</Text>
      <Button title="Back" onPress={() => router?.goBack()} />
      <Button title="Done" onPress={() => router?.close()} />
    </View>
  );
}

// ---- Sheet component ----
const routes: Route[] = [
  { name: 'step-one', component: StepOne },
  { name: 'step-two', component: StepTwo },
];

function WizardSheet(props: SheetProps<'wizard-sheet'>) {
  return (
    <ActionSheet
      id={props.sheetId}
      gestureEnabled
      routes={routes}
      initialRoute="step-one"
      enableRouterBackNavigation={true}
    />
  );
}

registerSheet('wizard-sheet', WizardSheet);
export default WizardSheet;

// ---- Open from anywhere ----
// SheetManager.show('wizard-sheet');

```

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

### snapToIndex

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

Snaps the action sheet to a specific snap point index.

```APIDOC
## snapToIndex

### Description
When multiple snap points are set on the action sheet, use this to snap it to different position.

### Method
`snapToIndex(index: number)`

### Endpoint
N/A (Method call)

### Parameters
#### Parameters
- **index** (number) - Required - Snap to the snap point at given index.

### Request Example
```ts
ref.current?.snapToIndex(1);
```

### Response
None
```

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

### Import ActionSheetRef

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheetref.mdx

Import the ActionSheetRef type for type safety when creating a ref.

```tsx
import {ActionSheetRef} from 'react-native-actions-sheet';

const ref = useRef<ActionSheetRef>(null);
```

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

### Register ActionSheet with Routes

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/sheetrouter.mdx

This snippet shows how to register a sheet component with its defined routes using `registerSheet`. It also includes TypeScript declarations for route parameters.

```ts
import {registerSheet} from 'react-native-actions-sheet';
import {SheetWithRouter} from './sheet-with-router';

registerSheet('sheet-with-router', SheetWithRouter);

declare module 'react-native-actions-sheet' {
  interface Sheets {
    'sheet-with-router': SheetDefinition<{
      routes: {
        'route-a': RouteDefinition;
        // Route B with params.
        'route-b': RouteDefinition<{
          data: string
        }>;
      };
    }>;
  }
}
```

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

### Create ActionSheet Component

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/sheetmanager.mdx

Define your custom ActionSheet component. Ensure it's exported for later registration.

```tsx
function ExampleSheet() {
  return (
    <ActionSheet gestureEnabled>
      <View>
        <Text>Hello World</Text>
      </View>
    </ActionSheet>
  );
}

export default ExampleSheet;
```

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

### Register Sheet with Multiple Contexts

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/migrate.mdx

The `registerSheet` function now accepts multiple context arguments for a sheet ID.

```ts
registerSheet('sheet-id', ExampleSheet, 'context-a', 'context-b');
```

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

### elevation

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Sets the elevation value for the ActionSheet container. Defaults to 5.

```APIDOC
## `elevation`

### Description
Set elevation to the ActionSheet container.

### Type
`number`

### Required
no

### Default
`5`
```

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

### Chaining ActionSheets Sequentially

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/guides/getdata.mdx

Chain multiple ActionSheets by using `await` when calling `SheetManager.show`. Each sheet's promise resolves only after it has been closed, allowing for sequential user interactions.

```typescript
let result = await SheetManager.show('sheet-a');
if (result) return await SheetManager.show('sheet-b');
/// and so on.
```

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

### enableElevation

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/actionsheet.mdx

Enables or disables the elevation effect on the action sheet container. Defaults to true.

```APIDOC
## `enableElevation`

### Description
Enable elevation on the action sheet container.

### Type
`boolean`

### Required
no

### Default
`true`
```

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

### Inspect Sheet Stack with getSheetStack and isRenderedOnTop

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Utilize utility functions to inspect the current sheet stack for debugging or conditional rendering. `getSheetStack` returns an array of open sheets, and `isRenderedOnTop` checks if a specific sheet is the topmost.

```tsx
import { getSheetStack, isRenderedOnTop } from 'react-native-actions-sheet';

// Returns array of { id: string, context: string } for all open sheets
const stack = getSheetStack();
console.log(stack);
// [{ id: 'confirm-sheet', context: 'global' }, { id: 'profile-sheet', context: 'global' }]

// Check if a specific sheet is topmost (for handling back presses, etc.)
const onTop = isRenderedOnTop('confirm-sheet');
console.log('Is confirm-sheet on top?', onTop); // true / false

// Check with a specific context
const onTopInContext = isRenderedOnTop('confirm-sheet', 'modal-context');

```

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

### Show Basic Action Sheet

Source: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/docs/pages/reference/sheetmanager.mdx

Use to display an action sheet identified by its ID. This method is asynchronous and resolves when the sheet is closed, potentially returning a result.

```typescript
SheetManager.show('example-sheet');
```

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

### getSheetStack / isRenderedOnTop

Source: https://context7.com/ammarahm-ed/react-native-actions-sheet/llms.txt

Utility functions to inspect the currently rendered sheet stack. Useful for conditional rendering logic or debugging.

```APIDOC
## getSheetStack / isRenderedOnTop

Utility functions to inspect the currently rendered sheet stack. Useful for conditional rendering logic or debugging.

```tsx
import { getSheetStack, isRenderedOnTop } from 'react-native-actions-sheet';

// Returns array of { id: string, context: string } for all open sheets
const stack = getSheetStack();
console.log(stack);
// [{ id: 'confirm-sheet', context: 'global' }, { id: 'profile-sheet', context: 'global' }]

// Check if a specific sheet is topmost (for handling back presses, etc.)
const onTop = isRenderedOnTop('confirm-sheet');
console.log('Is confirm-sheet on top?', onTop); // true / false

// Check with a specific context
const onTopInContext = isRenderedOnTop('confirm-sheet', 'modal-context');
```
```