Skip to main content
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;

​
Share Sheet

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;

​
Sharing Local Image

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.

Build docs developers (and LLMs) love

Get started for freeTalk to us