share extension using React Native

[alinz]

Just wondering whether we can write ios share extension by using react native? somthign like this

[brentvatne]

Yes, you can do this 😄

You will have to use Objecitve-C or Swift and write it as you would with any other native app at the moment.

[andrewsardone]

@brentvatne I'm curious if there's any fundamental reason a share extension couldn't talk to an RCTBridge and create an RCTRootView within the presented UIViewController. If it's theoretically possibly, I was curious to know you have any pointers to get a proof-of-concept setup working. If it's not possible, or not within the scope of the react-native team's goals, please disregard my comment. Thanks!

---

Example GitHub repo with project

So far the proof-of-concept setup is pretty straightforward, but I feel like I'm missing something very simple that will either enable this proof of concept or totally shut it down 😉.

In my react-native init scaffolded Xcode project (react-native-cli v0.1.7, react-native v0.15.0), I created a new Share Extension target and within it linked the appropriate React Native static libraries (libReact.a, libRCTWebSocket.a, etc.). This gets our project compiling for a very simple ShareViewController that's a plain ‘ol UIViewController:

Upon activating my Share Extension from another app, my ShareViewController is initialized but immediately crashes with the following log messages:

2015-11-29 12:44:34.721 [warn][tid:com.facebook.React.JavaScript][RCTContextExecutor.m:129] 'undefined is not an object (evaluating \'RCTWebSocketModule.connect\')'
2015-11-29 12:44:34.726 ShareExtension[66473:2179009] -[RCTBatchedBridge redBox]: unrecognized selector sent to instance 0x7fb59d8ab200
2015-11-29 12:53:47.160 [warn][tid:com.facebook.React.JavaScript][RCTContextExecutor.m:129] 'Requiring module "InitializeJavaScriptAppEngine" which threw an exception'
2015-11-29 12:53:47.160 ShareExtension[66473:2179009] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[RCTBatchedBridge redBox]: unrecognized selector sent to instance 0x7fb59d8ab200'

The line 'Requiring module "InitializeJavaScriptAppEngine" which threw an exception' looks particularly suspicious, and leads me to believe that I'm missing some basic JavaScriptCore setup within the share extension. Curious to know if there are any obvious areas to investigate. Thanks!

(If this is an area worth exploring, but I need to create a separate GitHub issue, just let me know)

[satya164]

Hey @andrewsardone

There's an awesome place to ask question like this one: StackOverflow. It's the best system for Q&A. Many people from the community hang out there and will be able to see your question, you can vote on answers and mark question as answered etc. This lets us keep a list of bug reports and feature requests on github and especially Product Pains (again, with voting which is really nice).

If you think StackOverflow works for you please consider posting there instead and closing this issue.

I'm posting this here because github issues haven't been working very well for us and because StackOverflow is so much better. Thanks for reading! :)

[andrewsardone]

Fair point, @satya164. I have posted a Stack Overflow question here: http://stackoverflow.com/q/33990925/792979

[satya164]

@andrewsardone Thank you

[brentvatne]

@andrewsardone - sorry just saw this! did you get it working? if so, a blog post would be awesome :) or a new section in the docs

[andrewsardone]

No prob, @brentvatne! To get things working, it was just a matter of adding the -ObjC linker flag to the share extension's build settings.

The solution came from this StackOverflow answer. Here is an example project: https://github.com/andrewsardone/react-native-ios-share-extension

Hopefully that's enough to help others get started!

[kulikalov]

Is there some kind of tutorial?

[rclai]

@andrewsardone I used your ideas to get a Today Widget kind of working: #7391

[alinz]

@andrewsardone I used your sample project and made the complete module for both ios and android.
@Anton-Aleksandrov you can checkout my project and see if that helps you. I have made a decent doc for how to getting it to work with reasons.
@brentvatne I'd like to know your opinion about the project.

https://github.com/alinz/react-native-share-extension

[rclai]

@alinz awesome, would you like to give this one a shot as well? #7391

[alinz]

@rclai I might look into it.

[npomfret]

Anyone had any success using https://github.com/alinz/react-native-share-extension? I'm having real problems getting it working. The share extension appears in iOS, but if it try an use it, say by pressing 'share' in Safari, nothing happens except that Safari completely locks up.

[ordishs]

Same for me. All compiling and deploying without error. Try to share from Photos or Safari and the extension is available, but when I click it, the app (Photos or Safari) hangs.

Any ideas greatly appreciated.

[npomfret]

@ordishs i figure out what was wrong with mine. Basically I have several native libraries in my project, and even though the share extension doesn't use them it needs to be linked in the same way. I have a headless JS app that starts as a side effect of importing the top level index.js file which needs a few native libs. If the share extension isn't linked in the same way as my main project it won't work.

[swyxio]

is there a canonical way to do this now within react native?

[alinz]

@sw-yx I have already documented all the steps required to setup the project to use react-native in share extension here.

[swyxio]

thank you @alinz. i tried last night but ran into issues with 'React/RCTInvalidating.h' file not found and other things not found. I tried a lot of ways to resolve (npm install, manually add to library) but got nowhere. I'll give it a try again and if any issues i'll file on your repo. thanks again.