Using the Capacitor Share API in IOS app

In this tutorial, I want to show you how to use the Capacitor Share API into your Ionic project and how it will work in IOS app.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line, installed Node, Ionic, Capacitor
All the following was done with the next requirements: Node v9.10.0, Ionic v4.0.6, Capacitor v1.0.0-beta6

Important: In this tutorial, we used Capacitor version beta, so it’s not production ready. 

New project

In this step, you need to use everything described in this official documentation of Capacitor. We will use the capacitorShareExample as appName (also for Ionic project too) and com.roma.capacitorShareExample as appId. On the step of adding platforms, we will add IOS.

Setup

Let’s go to the project folder and open the src/app/pages/home/home.ts file. We will include Capacitor Share API and ShareOptions interface to this component and create a simple method to share data

Modify src/app/pages/home/home.ts to reflect the following:

We initialized the empty shareObject on line 13. Share.share method (line 18) takes an object of ShareOptions interfaceYou can check more about in the official Capacitor doc.

Template

The template will be quite simple. 4 inputs for dialogTitle, text, title, url and 1 button to call share method.

Modify src/app/pages/home/home.html to reflect the following:

Results

We will build and run this project on specified platforms (IOS). We can do it using the running the next chain of commands in the terminal:

IOS

To check this project in Xcode we need to run the following:

Then we will run this project in the Xcode. You should see the next:

Capacitor Share Options
Capacitor Share Options

 

After entering some data and clicking on the Share button you should see the following:

Share Menu on IOS
Share Menu on IOS

As you can see, the menu is available for sharing, but there are no apps, because we tested this in IOS-emulator.

Conclusion

It’s very simple to integrate Capacitor Share API into your frontend, Ionic application.

If you liked this, please help spread the word by hitting the recommend button below. Thanks!