ActionSheetIOS

This API is iOS-only. It will not work on Android or other platforms.

Display action sheets and share sheets on iOS.

Example

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

const App = () => {
  const onPress = () =>
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Delete', 'Save'],
        destructiveButtonIndex: 1,
        cancelButtonIndex: 0,
      },
      (buttonIndex) => {
        if (buttonIndex === 1) {
          Alert.alert('Delete pressed');
        } else if (buttonIndex === 2) {
          Alert.alert('Save pressed');
        }
      }
    );

  return (
    <View style={styles.container}>
      <Button title="Show Action Sheet" onPress={onPress} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
});

export default App;

Methods

`showActionSheetWithOptions()`

ActionSheetIOS.showActionSheetWithOptions(options, callback);

Display an iOS action sheet. Parameters:

Name	Type	Required	Description
options	ActionSheetIOSOptions	Yes	Configuration object for the action sheet
callback	function	Yes	Callback function that receives the selected button index

Options Object:

Property	Type	Required	Description
options	string[]	Yes	An array of button titles (required)
cancelButtonIndex	number	No	Index of the cancel button in `options`
destructiveButtonIndex	number \| number[]	No	Index or indices of destructive buttons in `options`
title	string	No	A title to show above the action sheet
message	string	No	A message to show below the title
anchor	number	No	The node to which the action sheet should be anchored (iPad only)
tintColor	ColorValue	No	The color used for non-destructive button titles
cancelButtonTintColor	ColorValue	No	The color used for the cancel button title
disabledButtonTintColor	ColorValue	No	The color used for disabled button titles
userInterfaceStyle	’light’ \| ‘dark’	No	The interface style used for the action sheet
disabledButtonIndices	number[]	No	A list of button indices which should be disabled

Example:

ActionSheetIOS.showActionSheetWithOptions(
  {
    title: 'Choose an action',
    message: 'What would you like to do?',
    options: ['Cancel', 'Delete', 'Archive', 'Save'],
    destructiveButtonIndex: 1,
    cancelButtonIndex: 0,
    disabledButtonIndices: [2],
    tintColor: '#007AFF',
  },
  (buttonIndex) => {
    console.log('Button pressed:', buttonIndex);
  }
);

`showShareActionSheetWithOptions()`

ActionSheetIOS.showShareActionSheetWithOptions(options, failureCallback, successCallback);

Display the iOS share sheet. The options object should contain one or both of message and url. Parameters:

Name	Type	Required	Description
options	ShareActionSheetIOSOptions	Yes	Configuration object for the share sheet
failureCallback	function	Yes	Callback function that receives an error object
successCallback	function	Yes	Callback function that receives success status and sharing method

Options Object:

Property	Type	Required	Description
url	string	No	A URL to share
message	string	No	A message to share
subject	string	No	A subject for the message (email sharing)
excludedActivityTypes	string[]	No	The activities to exclude from the action sheet
anchor	number	No	The node to which the share sheet should be anchored (iPad only)

Note: If url points to a local file, or is a base64-encoded URI, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. Example:

ActionSheetIOS.showShareActionSheetWithOptions(
  {
    url: 'https://reactnative.dev',
    message: 'Check out React Native!',
    subject: 'React Native',
    excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'],
  },
  (error) => {
    console.error('Share failed:', error);
  },
  (success, method) => {
    if (success) {
      console.log('Shared via', method);
    }
  }
);

`dismissActionSheet()`

ActionSheetIOS.dismissActionSheet();

Dismisses the most upper iOS action sheet presented. If no action sheet is present, a warning is displayed. Example:

ActionSheetIOS.dismissActionSheet();

Complete Example

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

const App = () => {
  const showActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        title: 'File Actions',
        message: 'Choose what to do with this file',
        options: ['Cancel', 'Delete', 'Archive', 'Duplicate', 'Share'],
        destructiveButtonIndex: 1,
        cancelButtonIndex: 0,
        tintColor: '#007AFF',
        userInterfaceStyle: 'light',
      },
      (buttonIndex) => {
        const actions = ['Cancelled', 'Delete', 'Archive', 'Duplicate', 'Share'];
        Alert.alert('Action Selected', actions[buttonIndex]);
      }
    );
  };

  const showActionSheetWithMultipleDestructive = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        title: 'Destructive Actions',
        message: 'Multiple destructive options',
        options: ['Cancel', 'Delete All', 'Remove', 'Clear Cache'],
        destructiveButtonIndex: [1, 2, 3],
        cancelButtonIndex: 0,
      },
      (buttonIndex) => {
        console.log('Selected button:', buttonIndex);
      }
    );
  };

  const showShareSheet = () => {
    ActionSheetIOS.showShareActionSheetWithOptions(
      {
        url: 'https://reactnative.dev',
        message: 'React Native - A framework for building native apps using React',
        subject: 'Check out React Native!',
      },
      (error) => Alert.alert('Error', error.message),
      (success, method) => {
        if (success) {
          Alert.alert('Success', `Shared via ${method}`);
        } else {
          Alert.alert('Cancelled', 'Share was cancelled');
        }
      }
    );
  };

  const showShareSheetWithImage = () => {
    // Example with a local image
    const imageUrl = 'file:///path/to/local/image.png';
    // Or base64 encoded image
    // const imageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

    ActionSheetIOS.showShareActionSheetWithOptions(
      {
        url: imageUrl,
        message: 'Check out this image!',
      },
      (error) => console.error('Share failed:', error),
      (success, method) => {
        if (success) {
          console.log('Image shared via', method);
        }
      }
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Show Action Sheet" onPress={showActionSheet} />
      <Button
        title="Multiple Destructive Buttons"
        onPress={showActionSheetWithMultipleDestructive}
      />
      <Button title="Share URL" onPress={showShareSheet} />
      <Button title="Share Image" onPress={showShareSheetWithImage} />
      <Button
        title="Dismiss Action Sheet"
        onPress={() => ActionSheetIOS.dismissActionSheet()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
    gap: 10,
  },
});

export default App;

iPad Considerations

On iPad, action sheets are displayed as popovers. You can anchor them to a specific view using the anchor prop:

import { findNodeHandle } from 'react-native';

const buttonRef = useRef(null);

const showActionSheet = () => {
  const anchor = findNodeHandle(buttonRef.current);
  
  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: ['Cancel', 'Delete', 'Save'],
      cancelButtonIndex: 0,
      destructiveButtonIndex: 1,
      anchor,
    },
    (buttonIndex) => {
      console.log('Button pressed:', buttonIndex);
    }
  );
};

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

Core Components

User Interface

List Components

Android Components

iOS Components

Example

Methods

`showActionSheetWithOptions()`

`showShareActionSheetWithOptions()`

`dismissActionSheet()`

Complete Example

iPad Considerations

​Example

​Methods

​showActionSheetWithOptions()

​showShareActionSheetWithOptions()

​dismissActionSheet()

​Complete Example

​iPad Considerations

Example

Methods

`showActionSheetWithOptions()`

`showShareActionSheetWithOptions()`

`dismissActionSheet()`

Complete Example

iPad Considerations