react-native/website/_versioned_docs/version-0.41/share.md

id, original_id, title

id	original_id	title
version-0.41-share	share	share

Share #

Methods #

static share(content, options) #

Open a dialog to share text content.

In iOS, Returns a Promise which will be invoked an object containing action, activityType. If the user dismissed the dialog, the Promise will still be resolved with action being Share.dismissedAction and all the other keys being undefined.

In Android, Returns a Promise which always be resolved with action being Share.sharedAction.

Content #

• message - a message to share
• title - title of the message

iOS #

• url - an URL to share

At least one of URL and message is required.

Options #

iOS #

• excludedActivityTypes
• tintColor

Android #

• dialogTitle

static sharedAction(0) #

The content was successfully shared.

static dismissedAction(0) #

The dialog has been dismissed. @platform ios

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 { StyleSheet, View, Text, TouchableHighlight, Share, } = ReactNative;

exports.framework = 'React'; exports.title = 'Share'; exports.description = 'Share data with other Apps.'; exports.examples = [{ title: 'Share Text Content', render() { return <ShareMessageExample />; } }];

class ShareMessageExample extends React.Component { _shareMessage: Function; _shareText: Function; _showResult: Function; state: any;

constructor(props) { super(props);

<span class="token keyword">this</span><span class="token punctuation">.</span>_shareMessage <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_shareMessage<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_shareText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_shareText<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_showResult <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_showResult<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
  result<span class="token punctuation">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

}

render() { return ( <View> <TouchableHighlight style={styles.wrapper} onPress={this._shareMessage}> <View style={styles.button}> <Text>Click to share message</Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={this._shareText}> <View style={styles.button}> <Text>Click to share message, URL and title</Text> </View> </TouchableHighlight> <Text>{this.state.result}</Text> </View> ); }

_shareMessage() { Share.share({ message: 'React Native | A framework for building native apps using React' }) .then(this._showResult) .catch((error) => this.setState({result: 'error: ' + error.message})); }

_shareText() { Share.share({ message: 'A framework for building native apps using React', url: 'http://facebook.github.io/react-native/', title: 'React Native' }, { dialogTitle: 'Share React Native website', excludedActivityTypes: [ 'com.apple.UIKit.activity.PostToTwitter' ], tintColor: 'green' }) .then(this._showResult) .catch((error) => this.setState({result: 'error: ' + error.message})); }

_showResult(result) { if (result.action === Share.sharedAction) { if (result.activityType) { this.setState({result: 'shared with an activityType: ' + result.activityType}); } else { this.setState({result: 'shared'}); } } else if (result.action === Share.dismissedAction) { this.setState({result: 'dismissed'}); } }

}

var styles = StyleSheet.create({ wrapper: { borderRadius: 5, marginBottom: 5, }, button: { backgroundColor: '#eeeeee', padding: 10, }, });

Run this example

×

Powered by appetize.io

← PrevNext →