Back to React Native

Share

docs/share.md

latest4.9 KB
Original Source

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

Example

<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}> <TabItem value="javascript">
SnackPlayer
import React from 'react';
import {Alert, Share, Button} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const ShareExample = () => {
  const onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      Alert.alert(error.message);
    }
  };
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <Button onPress={onShare} title="Share" />
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default ShareExample;
</TabItem> <TabItem value="typescript">
SnackPlayer
import React from 'react';
import {Alert, Share, Button} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const ShareExample = () => {
  const onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error: any) {
      Alert.alert(error.message);
    }
  };
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <Button onPress={onShare} title="Share" />
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default ShareExample;
</TabItem> </Tabs>

Reference

Methods

share()

tsx
static share(content: ShareContent, options?: ShareOptions);

Open a dialog to share text content.

In iOS, returns a Promise which will be invoked with an object containing action and 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. Note that some share options will not appear or work on the iOS simulator.

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

Properties:

NameTypeDescription
content <div className="label basic required">Required</div>objectmessage - a message to share
url - a URL to share <div className="label ios">iOS</div>
title - title of the message <div className="label android">Android</div><hr/>At least one of url and message is required.
optionsobjectdialogTitle <div className="label android">Android</div>
excludedActivityTypes <div className="label ios">iOS</div>
subject - a subject to share via email <div className="label ios">iOS</div>
tintColor <div className="label ios">iOS</div>
anchor - the node to which the action sheet should be anchored (used for iPad) <div className="label ios">iOS</div>

Properties

sharedAction

tsx
static sharedAction: 'sharedAction';

The content was successfully shared.


dismissedAction <div className="label ios">iOS</div>

tsx
static dismissedAction: 'dismissedAction';

The dialog has been dismissed.