Trying to build a React Native app that injects a menu item in the Share menu (Share Action for Android, Share Extension for iOS) and receives shared items in the app. Is there a component for this, and if not what's the best way to build one?
3
- 2have you found the solution? I believe the answer below is not what you've been asking aboutstkvtflw– stkvtflw2016-02-14 12:17:26 +00:00Commented Feb 14, 2016 at 12:17
- 1Also interested to know. Clearly, the answer below doesn't answer the OP question.ericpeters0n– ericpeters0n2016-03-12 20:30:52 +00:00Commented Mar 12, 2016 at 20:30
- According to our on-topic guidance, "Some questions are still off-topic, even if they fit into one of the categories listed above:...Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic..."Robert Columbia– Robert Columbia2018-06-08 00:09:13 +00:00Commented Jun 8, 2018 at 0:09
Add a comment |
3 Answers
I implemented a module for that: https://www.npmjs.com/package/react-native-share-menu (currently just works for Android).
That's 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 android/app/build.gradle:
... dependencies { ... compile project(':react-native-share-menu') } Register 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); 
5 Comments
infojunkie
Update: this component now supports iOS too.
manuelBetancurt
hi @Caio when you want to publish, what do you do? do you use the bundle from main project on extension? or do you copy paste that bundle on the extension? thanks!
Caio Almeida
@MaKo I just generate a bundle of the main project, which will include the extension
nexus
Hi @CaioAlmeida, interestingly, the action extension does not show up on my device while in the simulator it works fine (same device version and iOS version). Any ideas?
Caio Almeida
Not really, unfortunately I'm looking for an iOS developer to maintain the iOS version :( github.com/meedan/react-native-share-menu/issues/…
You can use the built in component: https://facebook.github.io/react-native/docs/actionsheetios.html#content
Or you can use this component which can accept any view you want and makes it look like the iOS share component:
https://github.com/eyaleizenberg/react-native-custom-action-sheet
These are designed for iOS. For Android (and also iOS), you can use this: https://github.com/EstebanFuentealba/react-native-share
Comments
You can use the new Share api introduced in 0.33. I actually have a video on how to do this here: http://codecookbook.co/post/how-to-share-text-from-your-react-native-app/
1 Comment
infojunkie
If you mean this: developers.facebook.com/docs/react-native/sharing then you're referring to the inverse operation: opening a share menu from within the RN app to an external site or other app. The question here is to inject a share ITEM that shows up in all apps to send content to the RN app.