Skip to main content
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:
NameTypeRequiredDescription
optionsActionSheetIOSOptionsYesConfiguration object for the action sheet
callbackfunctionYesCallback function that receives the selected button index
Options Object:
PropertyTypeRequiredDescription
optionsstring[]YesAn array of button titles (required)
cancelButtonIndexnumberNoIndex of the cancel button in options
destructiveButtonIndexnumber | number[]NoIndex or indices of destructive buttons in options
titlestringNoA title to show above the action sheet
messagestringNoA message to show below the title
anchornumberNoThe node to which the action sheet should be anchored (iPad only)
tintColorColorValueNoThe color used for non-destructive button titles
cancelButtonTintColorColorValueNoThe color used for the cancel button title
disabledButtonTintColorColorValueNoThe color used for disabled button titles
userInterfaceStyle’light’ | ‘dark’NoThe interface style used for the action sheet
disabledButtonIndicesnumber[]NoA 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:
NameTypeRequiredDescription
optionsShareActionSheetIOSOptionsYesConfiguration object for the share sheet
failureCallbackfunctionYesCallback function that receives an error object
successCallbackfunctionYesCallback function that receives success status and sharing method
Options Object:
PropertyTypeRequiredDescription
urlstringNoA URL to share
messagestringNoA message to share
subjectstringNoA subject for the message (email sharing)
excludedActivityTypesstring[]NoThe activities to exclude from the action sheet
anchornumberNoThe 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} />
);

Build docs developers (and LLMs) love

Get started for freeTalk to us