react-native handle device “share to” feature iOS / android

Question

I have successfully implemented receive share intent handling in my android part of my react-native project. Now I want to do the same for the iOS part.

To provide a better idea of what I did in android, and so what I want in iOS. I will show some code snippets for clarity. I'm not sure what all the terms are called in the iOS world, making it very difficult to search knowledge/examples. Hopefully someone here on SO knows both platforms and can translate android to iOS terminology?

To make my app appear in the native android "share via" menu, I added these intent-filters to my AndroidManifest.xml

  <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
  <intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="text/plain" />
  </intent-filter>

this allows the user to mark some text, I my case urls, and share the url directly to my app. To pass that shared url to the react-native part I added following to my MainActivity.kt (could have been java as well)

class MainActivity : ReactActivity() {
    override fun createReactActivityDelegate(): ReactActivityDelegate {
        return object : ReactActivityDelegate(this, mainComponentName) {
            override fun getLaunchOptions(): Bundle? {
                return gerenateBundleFromIntent(intent)
            }
        }
    }


    private fun gerenateBundleFromIntent(intent: Intent) : Bundle {
        val bundle = Bundle()
        when {
            intent?.action == Intent.ACTION_SEND -> {
                if ("text/plain" == intent.type) {
                    intent.getStringExtra(Intent.EXTRA_TEXT)?.let {
                        bundle.putString("shareUrl", it)
                    }
                }
            } else -> {
            // Handle other intents, such as being started from the home screen
            }
        }
        return bundle
    }
}

the putString("shareUrl", it) will become a react-native prop called shareUrl

This allows me to receive data in my react-native code ( app.js ) like this:

export default class App extends Component<Props> {
  constructor(props) {
    super(props)
    this.state = {
      uri: undefined,
      shareUrl: this.props.shareUrl
    }
  }
...
}

If possible, I would like in a similar manner to be able on iOS device to share an url, to this app and pass that url to the shareUrl prop of my react-natve App.js

Where to start? These are the iOS dirs generated by the react-native cli, which files do I need to add what to?

Answer 1

You can use UIActivityViewController to share something from your iOS app to other apps,

func shareSomething() {
  let text = "abc"
  let image = UIImage(named: "ABC")
  let url = NSURL(string:"https://www.google.com")
  let share = [text , image! , url]
  let activityViewController = UIActivityViewController(activityItems: shareAll, applicationActivities: nil)
  activityViewController.popoverPresentationController?.sourceView = self.view 
  self.present(activityViewController, animated: true, completion: nil)
}

objective-c code is,

- (void)shareSomething
{
    NSURL *url = [NSURL fileURLWithPath:imagePath];
    NSArray *objectsToShare = @[url];
    UIActivityViewController *controller = [[UIActivityViewController alloc] initWithActivityItems:objectsToShare applicationActivities:nil];
    [controller setCompletionHandler:^(NSString *activityType, BOOL completed)
    {

    }]
    [self presentViewController:controller animated:YES completion:nil];
}

and if you want to pass something from the iOS to react-native as props, you can do that in AppDelegate.m file, inside

didFinishLaunchingWithOptions

function. Like this,

NSArray *imageList = @[@"http://foo.com/bar1.png",
                   @"http://foo.com/bar2.png"];

NSDictionary *props = @{@"images" : imageList};

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                             moduleName:@"YOUR_APP_NAME"
                                      initialProperties:props];