How To Use Ionic Native Plugins In React Capacitor Mobile Application

When working with Ionic Capacitor it is recommended to use the Capacitor Plugins sometimes you need to use a cordova or ionic-native plugin to get the job done. In the example below we show a quick use case of using the Ionic Native FileTransfer Plugin.

The basic command line to get your app started

The rest will take awhile

To get started, make sure you are properly installing the required plugins

In your code you will import the libraries needed

Finally when accessing the objects most of them now have a create method that exists so for example creating the file transfer object.

So putting it all together you get a functional component that looks something like this as the main function for downloading the image.

There are potential permission issues when accessing the image url to render so we convert it using the function convertFileSrc which is available as part of @capacitor/core so be sure to import it.

the render section of the component, where on the click event of the download button we call the download function.

We using the IonImg tag to render the actual image and IonLabel to display the local path

Since I am using IOS, to get capacitor app running in the simulator…

If you see this error on IOS

Then you will need to update capacitor to latest version


In this post I’ve gone over using reactjs and with Ionic Capacitor and the cordova plugins. There are a lot of examples out there using angular code with the Ionic Native, that can be translated to use in react, but I figured I would add one that is just based on react from the start

Code for this article is here

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store