ActionSheetIOS

ActionSheetIOS is iOS-only. On Android and other platforms, it has no effect.

The ActionSheetIOS API displays native iOS action sheets and share sheets. Action sheets present a set of options to the user, while share sheets enable content sharing through iOS’s native sharing capabilities.

Import

import { ActionSheetIOS } from 'react-native';

Methods

`showActionSheetWithOptions()`

static showActionSheetWithOptions(
  options: ActionSheetIOSOptions,
  callback: (buttonIndex: number) => void
): void

Display an iOS action sheet with custom options. Parameters:

options: Configuration object (see Options below)
callback: Function called with the zero-based index of the selected button

Options

interface ActionSheetIOSOptions {
  title?: string;                                    // Title text above the action sheet
  message?: string;                                  // Message text below the title
  options: string[];                                 // Array of button titles (required)
  cancelButtonIndex?: number;                        // Index of cancel button
  destructiveButtonIndex?: number | number[];        // Index/indices of destructive buttons
  anchor?: number;                                   // iPad: anchor point for popover
  tintColor?: ColorValue;                            // Button text color
  cancelButtonTintColor?: ColorValue;                // Cancel button text color
  disabledButtonTintColor?: ColorValue;              // Disabled button text color
  userInterfaceStyle?: 'light' | 'dark';            // Force light or dark appearance
  disabledButtonIndices?: number[];                  // Indices of buttons to disable
}

Example

import { ActionSheetIOS } from 'react-native';

ActionSheetIOS.showActionSheetWithOptions(
  {
    options: ['Cancel', 'Delete', 'Save'],
    destructiveButtonIndex: 1,
    cancelButtonIndex: 0,
    title: 'What would you like to do?',
    message: 'Choose an action for this item',
  },
  (buttonIndex) => {
    if (buttonIndex === 1) {
      // Delete was pressed
      console.log('Delete selected');
    } else if (buttonIndex === 2) {
      // Save was pressed
      console.log('Save selected');
    }
  }
);

`showShareActionSheetWithOptions()`

static showShareActionSheetWithOptions(
  options: ShareActionSheetIOSOptions,
  failureCallback: (error: Error) => void,
  successCallback: (success: boolean, method: string) => void
): void

Display the iOS share sheet for sharing content. Parameters:

options: Share configuration object (see Options below)
failureCallback: Called if sharing fails
successCallback: Called with success status and sharing method

Options

interface ShareActionSheetIOSOptions {
  message?: string;                    // Message to share
  url?: string;                        // URL to share (can be local file or base64)
  subject?: string;                    // Email subject line
  anchor?: number;                     // iPad: anchor point for popover
  tintColor?: ColorValue;              // Button tint color
  excludedActivityTypes?: string[];    // Activities to exclude
  userInterfaceStyle?: 'light' | 'dark';
}

If url points to a local file or is a base64-encoded URI, the file will be loaded and shared directly. This allows sharing images, videos, PDFs, etc.

Example

import { ActionSheetIOS } from 'react-native';

ActionSheetIOS.showShareActionSheetWithOptions(
  {
    url: 'https://example.com',
    message: 'Check out this awesome website!',
    subject: 'Website Recommendation',
    excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'],
  },
  (error) => {
    console.error('Share failed:', error);
  },
  (success, method) => {
    if (success) {
      console.log(`Shared via ${method}`);
    } else {
      console.log('Share cancelled');
    }
  }
);

`dismissActionSheet()`

static dismissActionSheet(): void

Dismisses the most recently presented action sheet. If no action sheet is present, a warning is displayed.

Example

import { ActionSheetIOS } from 'react-native';

ActionSheetIOS.dismissActionSheet();

Usage Examples

Basic Action Sheet

import React from 'react';
import { ActionSheetIOS, Button, View } from 'react-native';

function App() {
  const showActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Delete', 'Archive', 'Save'],
        destructiveButtonIndex: 1,
        cancelButtonIndex: 0,
      },
      (buttonIndex) => {
        switch (buttonIndex) {
          case 1:
            console.log('Delete');
            break;
          case 2:
            console.log('Archive');
            break;
          case 3:
            console.log('Save');
            break;
        }
      }
    );
  };

  return (
    <View>
      <Button title="Show Action Sheet" onPress={showActionSheet} />
    </View>
  );
}

export default App;

Action Sheet with Styling

import React from 'react';
import { ActionSheetIOS, Button, View } from 'react-native';

function App() {
  const showStyledActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Confirm', 'Maybe Later'],
        cancelButtonIndex: 0,
        title: 'Confirm Action',
        message: 'Are you sure you want to proceed?',
        tintColor: '#007AFF',
        cancelButtonTintColor: '#FF3B30',
        userInterfaceStyle: 'dark',
      },
      (buttonIndex) => {
        console.log(`Selected: ${buttonIndex}`);
      }
    );
  };

  return (
    <View>
      <Button title="Show Styled Action Sheet" onPress={showStyledActionSheet} />
    </View>
  );
}

export default App;

import React from 'react';
import { ActionSheetIOS, Button, View } from 'react-native';

function App() {
  const shareContent = () => {
    ActionSheetIOS.showShareActionSheetWithOptions(
      {
        url: 'https://reactnative.dev',
        message: 'Check out React Native documentation!',
        subject: 'React Native Resources',
      },
      (error) => {
        console.error('Sharing failed:', error.message);
      },
      (success, method) => {
        if (success) {
          console.log(`Successfully shared via ${method}`);
        }
      }
    );
  };

  return (
    <View>
      <Button title="Share" onPress={shareContent} />
    </View>
  );
}

export default App;

import React from 'react';
import { ActionSheetIOS, Button, View } from 'react-native';
import RNFS from 'react-native-fs';

function App() {
  const shareImage = async () => {
    const imagePath = `${RNFS.DocumentDirectoryPath}/photo.jpg`;
    
    ActionSheetIOS.showShareActionSheetWithOptions(
      {
        url: `file://${imagePath}`,
        message: 'Check out this photo!',
      },
      (error) => {
        console.error('Failed to share image:', error);
      },
      (success, method) => {
        if (success) {
          console.log(`Image shared via ${method}`);
        }
      }
    );
  };

  return (
    <View>
      <Button title="Share Image" onPress={shareImage} />
    </View>
  );
}

export default App;

Multiple Destructive Buttons

import React from 'react';
import { ActionSheetIOS, Button, View } from 'react-native';

function App() {
  const showMultiDestructive = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Delete All', 'Remove Selected', 'Keep'],
        destructiveButtonIndex: [1, 2], // Multiple destructive buttons
        cancelButtonIndex: 0,
        title: 'Manage Items',
      },
      (buttonIndex) => {
        console.log(`Button ${buttonIndex} pressed`);
      }
    );
  };

  return (
    <View>
      <Button title="Show Action Sheet" onPress={showMultiDestructive} />
    </View>
  );
}

export default App;

Platform-Specific Action Sheet

import React from 'react';
import { ActionSheetIOS, Button, Platform, Alert, View } from 'react-native';

function App() {
  const showOptions = () => {
    if (Platform.OS === 'ios') {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: ['Cancel', 'Option 1', 'Option 2'],
          cancelButtonIndex: 0,
        },
        (buttonIndex) => {
          if (buttonIndex !== 0) {
            console.log(`Option ${buttonIndex} selected`);
          }
        }
      );
    } else {
      // Fallback for other platforms
      Alert.alert(
        'Choose an option',
        '',
        [
          { text: 'Cancel', style: 'cancel' },
          { text: 'Option 1', onPress: () => console.log('Option 1') },
          { text: 'Option 2', onPress: () => console.log('Option 2') },
        ]
      );
    }
  };

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

export default App;

Notes

ActionSheetIOS only works on iOS. On other platforms, calls are ignored.
On iPad, action sheets are displayed as popovers. Use the anchor prop to specify the anchor point.
Destructive buttons are displayed in red to indicate destructive actions.
The cancel button is always displayed at the bottom (on iPhone) or outside the popover (on iPad).
Disabled buttons appear grayed out and don’t trigger the callback when tapped.
For sharing files, use file:// URLs or base64-encoded data URIs.
The share sheet respects the user’s sharing preferences and app availability.

Core APIs

Hooks

Interaction

Accessibility & Internationalization

Developer Tools

Networking

Storage

Android APIs

iOS APIs

Import

Methods

`showActionSheetWithOptions()`

Options

Example

`showShareActionSheetWithOptions()`

Options

Example

`dismissActionSheet()`

Example

Usage Examples

Basic Action Sheet

Action Sheet with Styling

Multiple Destructive Buttons

Platform-Specific Action Sheet

Notes

​Import

​Methods

​showActionSheetWithOptions()

​Options

​Example

​showShareActionSheetWithOptions()

​Options

​Example

​dismissActionSheet()

​Example

​Usage Examples

​Basic Action Sheet

​Action Sheet with Styling

​Share Sheet

​Sharing Local Image

​Multiple Destructive Buttons

​Platform-Specific Action Sheet

​Notes

Import

Methods

`showActionSheetWithOptions()`

Options

Example

`showShareActionSheetWithOptions()`

Options

Example

`dismissActionSheet()`

Example

Usage Examples

Basic Action Sheet

Action Sheet with Styling

Share Sheet

Sharing Local Image

Multiple Destructive Buttons

Platform-Specific Action Sheet

Notes