Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to navigate from ShareExtension to MainApp #86

Open
BigPun86 opened this issue Mar 14, 2018 · 22 comments
Open

How to navigate from ShareExtension to MainApp #86

BigPun86 opened this issue Mar 14, 2018 · 22 comments

Comments

@BigPun86
Copy link

Maybe i am not correctly understanding how the Share Extension should work so someone could correct me if necessary :)

I actually want to use the ShareExtension in order to Share an Image with my App. I set up everything correctly and the share modal from the Sample shows up. Now how do i actually tell the ShareExtension to enter the MainApp with its value & type?

Best regards

@alizafardev
Copy link

alizafardev commented Mar 20, 2018

+1
react-native 0.45

@isaachinman
Copy link
Collaborator

isaachinman commented Mar 24, 2018

I am also wondering the same thing. In general, I wonder what the reason is for splitting the ShareExtension into a separate application, as in most use cases you're going to want to handle the received data in your main app. Maybe someone can explain this to me.

Aside from that, it seems to me the way to go is to have your ShareExtension do some simple data transformation and then launch your main app via Linking.openURL, with the appropriate data as query params. Obviously you'll need to have deep linking set up in your app for this to work.

Currently I am looking into how to even enable the linking API inside this ShareExtension. I'll update this comment as I progress. Good luck!

Relevant issue(s): #51

@isaachinman
Copy link
Collaborator

isaachinman commented Mar 25, 2018

@BigPun86 @aliszafar1 Please check out the discussion on #51. There's a PR on this repository that is incredibly simple and allows you to open your host app via your share extension.

Then, just do something like this in your share receiver component, depending on your individual needs:

async componentDidMount() {
  try {
    const data = await ShareExtension.data()
    const urlSafeData = JSON.stringify({ data })
    await ShareExtension.openURL(`myapp://ShareReceive?shareReceivingData=${urlSafeData}`)
  } catch (e) {
    // Handle ShareExtension error
  }
}

Note that in my case, ShareExtension.data returns an array (multiple images), that's why I'm stringifying it inside an object.

You might also want to share storage between your host app and share extension to do things like check login status and only launch the host app if someone is logged out, etc. Everything is now a possibility.

@BigPun86
Copy link
Author

BigPun86 commented Mar 28, 2018

@isaachinman thanks man. I actually got it working exactly like this using one PR where they have implemented openURL natively inside the react-native-share-extensions. Now this works all great when the Main App is opened or in background etc. But it does not work when the app is completely closed. Maybe react-native-swiss-knife will solve this, i will test it tomorrow

@mtzfactory
Copy link

Hi @BigPun86,

Have you tried yet?

@BigPun86
Copy link
Author

@mtzfactory yes, but unfortunately i couldn't get it working! Actually i have fixed it in a separate fork => https://github.com/BigPun86/react-native-share-extension

There will be a much cleaner implementation. I will push it the next days, hopefully until the weekend.

@ekeuus
Copy link

ekeuus commented Oct 28, 2018

@BigPun86 Were you able to solve this with a "clean" implementation?

@frenberg
Copy link

Is this really ok by apple? I mean the share extension is supposed to run in a host app (Images, Safari, Mail etc) and to just jump into another app would seam to break that design.

Look here: https://developer.apple.com/library/archive/documentation/General/Conceptual/ExtensibilityPG/ExtensionOverview.html#//apple_ref/doc/uid/TP40014214-CH2-SW2

The "How an App Extension Communicates" paragraph states: "A Today widget (and no other app extension type) can ask the system to open its containing app..."

I'm not sure, just saying this might not pass review at apple.

@isaachinman
Copy link
Collaborator

@frenberg Feel free to check out #67, and other places where we've discussed this. Many of us have released apps via Apple containing this approach. Moreover, large apps like Pinterest take this approach, as @birkir points out.

You are correct in that it may be against Apple policy on paper, but in practice we've had no issues in reviews. The risk associated with a failed review is something to discuss with your team/colleagues.

@frenberg
Copy link

@isaachinman thank you for that info, that was new to me. Very interesting!

Tried to have a look at how Pintrest do this but their share extension just flickers and crashes on my iphone xs :)

@theone3nu
Copy link

@isaachinman I have tried this

> async componentDidMount() {
  try {
    const data = await ShareExtension.data()
    const urlSafeData = JSON.stringify({ data })
    await ShareExtension.openURL(`myapp://ShareReceive?shareReceivingData=${urlSafeData}`)
  } catch (e) {
    // Handle ShareExtension error
  }
}

But my react native app is not opening. Can you please help?

@isaachinman
Copy link
Collaborator

Are you on Android? I believe you need to take a different approach vs iOS:

await ShareExtension.openURL(url) // iOS
await Linking.openURL(url) // Android

@theone3nu
Copy link

@isaachinman Actually code is not updated in npm repo. But it is updated in github. I directly downloaded the code from github and used that library then it fixed the issue. Thanks for the library.

@isaachinman
Copy link
Collaborator

@AndrewHenderson Do we have any release targets currently? This project hasn't been deployed on npm in a year.

@daviswhitehead
Copy link

@AndrewHenderson @isaachinman I just want to bump that I was able to resolve this as @theone3nu did by downloading the repo directly from github. It would be really great to get another up to date npm deploy... Not sure who's responsible for that, maybe @alinz ?

@isaachinman
Copy link
Collaborator

@daviswhitehead I've got npm access. You're saying you've been using the latest master as a dep, right?

@daviswhitehead
Copy link

Yep that's correct, I just now downloaded master and replaced the existing node_modules/react-native-share-extension folder with its files and it worked perfectly.

@isaachinman
Copy link
Collaborator

@AndrewHenderson Unless you object to it, I am going to release the current master as a major (v2.0.0) imminently. I'm not sure if there are breaking changes in the diff so this seems safest to me.

@isaachinman
Copy link
Collaborator

I've just released v2.0.0.

@AndrewHenderson
Copy link
Collaborator

@isaachinman Apologies for the delayed response. I think it was good idea to release the current master branch. There were bugs in the previous npm version. 👍

There wasn't anything major in this release. I believe it was mostly bug fixes.

The features I believe still need to be developed are listed here: #123 (comment).

@SirCameron
Copy link

I'm having this issue as well and I cannot find the setting "Require Only App-Extension-Safe API" in the extension build settings.. Xcode 10.3

@colaskirschoff
Copy link

@SirCameron have you tried using the search bar in build settings ?

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests