How to use a Cordova plugin in react JS page

Question

I would like to use some Cordova plugins in my react JS app and the app has been failing. I understand cordova is only available at runtime by i need a workaround.

My app was created with create react app with cordova here

For example, I want to import the cordova-plugin-device to get the device uuid with the following code:

import React,  {Component} from 'react';
...    
var device = require("cordova-plugin-device");

class Login extends Component {
    handleSubmit = () => {
        const { phone, password } = this.state

        let params = {
            phonenumber: phone,
            password: password,
            deviceID:  device ? device.uuid : "test"

        }
        ...
   }
   render () {
       ...
   }

 }
}

I am getting an error with npm start and when i run npm build . This is the error Module not found: Can't resolve 'cordova-plugin-device' in 'C:\projects\

Any pointers on how to implement this would be appreciated.

Answer 1

I figured how to solve my problem. COrdova is made available at runtime so i used window.cordovaPulgin to access it.

For example, i needed a Payment plugin service that call its methods, like this:

PaymentPlugin.pay(payRequest, paySuccess, payFail);

My problem was that my code npm start && npm run build was failing because it could not find PaymentPlugin, so to make this work, after extensive research, realized that if plugin was properly installed, I would be able to use it like

window.PaymentPlugin.pay(payRequest, paySuccess, payFail);

Answer 2

I was trying to follow the same suggested solution by @Lateefah to get access of local notifications plugin but window.cordova was showing undefined. After doing some more research, I realised that the solution is correct but my react application must reside in the the cordova project as suggest here https://stackoverflow.com/a/43440380/4080906.

The steps I followed:

1. create cordova app (e.g. cordovaApp)

2. cd cordovaApp && create-react-app reactApp

3. modify index.js in reactApp and add

    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import * as serviceWorker from "./serviceWorker";
    
    const startApp = () => {
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById("root")
      );
    };
    
    if (!window.cordova) {
      startApp();
    } else {
      document.addEventListener("deviceready", startApp, false);
    }
    
    serviceWorker.unregister();

4. add cordova.js reference in the body tag of index.html in reactApp under public folder

    <script type="text/javascript" src="cordova.js"></script>

5. (OPTIONAL) modify build command in package.json in reactApp to build and copy the build to cordova www folder (For Linux/Mac)

    "build": "react-scripts build && cp -a ./build/. ../www/",

6. (OPTIONAL) To test this, I added a button in app.js and added notification there and it worked for me on an android device.

    import React from "react";
    import logo from "./logo.svg";
    import "./App.css";
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <button
              onClick={() => {
                if (window.cordova) {
                  if (window.cordova.plugins) {
                    alert("Crodova and plugins Found");
               window.cordova.plugins.notification.local.schedule({
                      title: "My first notification",
                      text: "Thats pretty easy...",
                      foreground: true,
                    });
                  } else alert("plugins not found");
                } else alert("Cordova not found");
              }}
            >
              Get Notified
            </button>
          </header>
        </div>
      );
    }
    
    export default App;