React NativeActionSheetIOS #
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 inoptionsdestructiveButtonIndex(int) - index of destructive button inoptionstitle(string) - a title to show above the action sheetmessage(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 sharemessage(string) - a message to sharesubject(string) - a subject for the messageexcludedActivityTypes(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,
Text,
UIManager,
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),
(success, method) => {
var text;
if (success) {
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)
UIManager.takeSnapshot('window').then((uri) => {
// Share image data
ActionSheetIOS.showShareActionSheetWithOptions({
url: uri,
excludedActivityTypes: [
'com.apple.UIKit.activity.PostToTwitter'
]
},
(error) => alert(error),
(success, method) => {
var text;
if (success) {
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(): ReactElement<any> { return <ActionSheetExample />; }
},
{
title: 'Show Action Sheet with tinted buttons',
render(): ReactElement<any> { return <ActionSheetTintExample />; }
},
{
title: 'Show Share Action Sheet',
render(): ReactElement<any> {
return <ShareActionSheetExample url="https://code.facebook.com" />;
}
},
{
title: 'Share Local Image',
render(): ReactElement<any> {
return <ShareActionSheetExample url="bunny.png" />;
}
},
{
title: 'Share Screenshot',
render(): ReactElement<any> {
return <ShareScreenshotExample />;
}
}
];
