Adding share action / extension to React Native

Question

An attempt to create a React Native application that introduces a menu item in the Share menu (Share Action for Android, Share Extension for iOS) and receives common elements in the application. Is there a component for this, and if not the best way to build it?

Answer 1

I implemented a module for this: https://www.npmjs.com/package/react-native-share-menu (currently works only for Android).

How to use it:

Install the module:

npm i --save react-native-share-menu

In android / settings.gradle:

 ... include ':react-native-share-menu', ':app' project(':react-native-share-menu').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share-menu/android') 

In the android / app / build.gradle file:

 ... dependencies { ... compile project(':react-native-share-menu') } 

Registration module (in MainActivity.java):

 import com.meedan.ShareMenuPackage; // <--- import public class MainActivity extends ReactActivity { ...... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new ShareMenuPackage() // <------ add here ); } ...... } 

Example:

 import React, { AppRegistry, Component, Text, View } from 'react-native'; import ShareMenu from 'react-native-share-menu'; class Test extends Component { constructor(props) { super(props); this.state = { sharedText: null }; } componentWillMount() { var that = this; ShareMenu.getSharedText((text :string) => { if (text && text.length) { that.setState({ sharedText: text }); } }) } render() { var text = this.state.sharedText; return ( <View> <Text>Shared text: {text}</Text> </View> ); } } AppRegistry.registerComponent('Test', () => Test); 

Answer 2

You can use the built-in component: https://facebook.imtqy.com/react-native/docs/actionsheetios.html#content

Or you can use this component, which can take any of your opinions and make it look like an iOS share:

https://github.com/eyaleizenberg/react-native-custom-action-sheet

They are for iOS. For Android (as well as iOS) you can use this: https://github.com/EstebanFuentealba/react-native-share

Answer 3

You can use the new Share api introduced in 0.33. Actually, I have a video on how to do it here: http://codecookbook.co/post/how-to-share-text-from-your-react-native-app/