React Native and iOS share button

Question

I am trying to access iOS' share button where you can share content to all services, including messages etc... Any idea how I could do this? Thanks

The "iOS share button" is UIActivityViewController: http://jairtrejo.mx/blog/2015/09/share-button-react-native — , Nov 18 '16 at 15:02
Ok thanks so I would have to write it in ObjC and then link it @IanBell? — dylan, Nov 18 '16 at 16:56
https://github.com/facebook/react-native/blob/master/Libraries/ActionSheetIOS/RCTActionSheetManager.m — , Nov 18 '16 at 19:21

MoOx · Answer 1 · 2019-01-18T07:47:21.097

7

You now have a simple Share API in react-native.

import { Share } from "react-native"

Share.share(
      {
        title: "a title",
        message: "some message",
        // or
        url: imageReference
      },
      (options)
    );

See http://facebook.github.io/react-native/docs/share.html

edited Jan 18 '19 at 07:47

answered Nov 09 '17 at 06:35

MoOx

8,423
5
40
39

score 4 · Answer 2 · answered Nov 21 '16 at 02:55

4

You can achieve this out of the box in React Native - just use ActionSheetIOS.showShareActionSheetWithOptions. See the documentation here.

answered Nov 21 '16 at 02:55

David

2,741
2
18
24

score 3 · Answer 3 · answered Nov 19 '16 at 20:42

3

You might want to check out the react-native-share package, it should cover your usecase. You can also see more relevant packages on JS.Coach

answered Nov 19 '16 at 20:42

martinarroyo

9,389
3
38
75

score 0 · Answer 4 · answered Jan 01 '22 at 14:19

It's much easier than you think. Adding to @MoOx answer further.

With the new share api available, you can easily share information with your React Native app by just using it with all variables and configuration. (see here)

import React from 'react';
import { Share, View, Button } from 'react-native';

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(error.message);
    }
  };
  return (
    <View style={{ marginTop: 50 }}>
      <Button onPress={onShare} title="Share" />
    </View>
  );
};

export default ShareExample;

React Native and iOS share button

4 Answers4