How to use plugin call number, file,media plugins in ionic 4 with react

Capacitor
1

Hello,
I am facing challenge in regard to use call number and file plugins in Ionic 4 with react.
Please help and guide me. Thanks in advance.

2

Hi!

Can u describe your use case?

Alex.

3

I have run the following commands:
…

npm install --save call-number
npx cap sync
…

Now i am trying to import the plugin in my file like this:

import { CallNumber } from ‘@ionic-native/call-number/ngx’;

…

function Call()
{
CallNumber.callNumber(“9988…”, true);
}

and it’s showing me error like:

./node_modules/@ionic-native/call-number/index.js
Module not found: Can’t resolve ‘@ionic-native/core’ in ‘E:\Ionic\myApp\node_modules@ionic-native\call-number\ngx’

4

try to install @ionic-native/core.

npm i @ionic-native/core

5

Thanks @Priyanka34

I have installed @ionic-native/core.

But I am unable to use the call-number plugin in Ionic with react.

…
function Call()
{
CallNumber.callNumber(“9988…”, true);
}
…
and it’s showing me error:

Property ‘callNumber’ does not exist on type ‘typeof CallNumber’.

6

For this, please share a proper code. So i can find perfect solution fot the same.

7

Why don’t you just use the native mobile phone from the device?

Having an anchor like the following should do the work and for most parts should be bulletproof.

<a href="tel: {{ selectedProject.contact.phone }}">{{selectedProject.contact.phone}}</a>

8

@Priyanka34

Please find sample code below …

import { CallNumber } from ‘@ionic-native/call-number/ngx’;

const DemoPage: React.FC = () => {

function Call() 
{
    CallNumber.callNumber("18001010101", true);
}

return (
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonButtons slot="start">
                    <IonMenuButton />
                </IonButtons>
                <IonTitle>Demo</IonTitle>   
            </IonToolbar>
        </IonHeader>

        <IonContent>
        	<IonFabButton color="primary" onClick={() => Call()}>
        		Call
            </IonFabButton>
        </IonContent>
    </IonPage>    
);

};

9

@terranmarine No, I am working on Ionic with react and there are some plugins that were missing for the capacitor such as callNumber, file transfer, media, … so for that I am trying to use the Cordova plugin in the capacitor .

10

import { CallNumber } from ‘@ionic-native/call-number’;

solved my problem…

Thanks… @Priyanka34 and @terranmarine