ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

Display an iOS action sheet. The options object must contain one or more of:

  • options (array of strings) - a list of button titles (required)
  • cancelButtonIndex (int) - index of cancel button in options
  • destructiveButtonIndex (int) - index of destructive button in options
  • title (string) - a title to show above the action sheet
  • message (string) - a message to show below the title

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

Display the iOS share sheet. The options object should contain one or both of message and url and can additionally have a subject or excludedActivityTypes:

  • url (string) - a URL to share
  • message (string) - a message to share
  • subject (string) - a subject for the message
  • excludedActivityTypes (array) - the activities to exclude from the ActionSheet

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.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { ActionSheetIOS, StyleSheet, takeSnapshot, Text, View, } = ReactNative; var BUTTONS = [ 'Option 0', 'Option 1', 'Option 2', 'Delete', 'Cancel', ]; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; class ActionSheetExample extends React.Component { state = { clicked: 'none', }; render() { return ( <View> <Text onPress={this.showActionSheet} style={style.button}> Click to show the ActionSheet </Text> <Text> Clicked button: {this.state.clicked} </Text> </View> ); } showActionSheet = () => { ActionSheetIOS.showActionSheetWithOptions({ options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); }); }; } class ActionSheetTintExample extends React.Component { state = { clicked: 'none', }; render() { return ( <View> <Text onPress={this.showActionSheet} style={style.button}> Click to show the ActionSheet </Text> <Text> Clicked button: {this.state.clicked} </Text> </View> ); } showActionSheet = () => { ActionSheetIOS.showActionSheetWithOptions({ options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, tintColor: 'green', }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); }); }; } class ShareActionSheetExample extends React.Component { state = { text: '' }; render() { return ( <View> <Text onPress={this.showShareActionSheet} style={style.button}> Click to show the Share ActionSheet </Text> <Text> {this.state.text} </Text> </View> ); } showShareActionSheet = () => { ActionSheetIOS.showShareActionSheetWithOptions({ url: this.props.url, message: 'message to go with the shared url', subject: 'a subject to go in the email heading', excludedActivityTypes: [ 'com.apple.UIKit.activity.PostToTwitter' ] }, (error) => alert(error), (completed, method) => { var text; if (completed) { text = `Shared via ${method}`; } else { text = 'You didn\'t share'; } this.setState({text}); }); }; } class ShareScreenshotExample extends React.Component { state = { text: '' }; render() { return ( <View> <Text onPress={this.showShareActionSheet} style={style.button}> Click to show the Share ActionSheet </Text> <Text> {this.state.text} </Text> </View> ); } showShareActionSheet = () => { // Take the snapshot (returns a temp file uri) takeSnapshot('window').then((uri) => { // Share image data ActionSheetIOS.showShareActionSheetWithOptions({ url: uri, excludedActivityTypes: [ 'com.apple.UIKit.activity.PostToTwitter' ] }, (error) => alert(error), (completed, method) => { var text; if (completed) { text = `Shared via ${method}`; } else { text = 'You didn\'t share'; } this.setState({text}); }); }).catch((error) => alert(error)); }; } var style = StyleSheet.create({ button: { marginBottom: 10, fontWeight: '500', } }); exports.title = 'ActionSheetIOS'; exports.description = 'Interface to show iOS\' action sheets'; exports.examples = [ { title: 'Show Action Sheet', render(): React.Element<any> { return <ActionSheetExample />; } }, { title: 'Show Action Sheet with tinted buttons', render(): React.Element<any> { return <ActionSheetTintExample />; } }, { title: 'Show Share Action Sheet', render(): React.Element<any> { return <ShareActionSheetExample url="https://code.facebook.com" />; } }, { title: 'Share Local Image', render(): React.Element<any> { return <ShareActionSheetExample url="bunny.png" />; } }, { title: 'Share Screenshot', render(): React.Element<any> { return <ShareScreenshotExample />; } } ];