Ionic React - Can I use speech recognition plugins in project?

[emeritvs]

I am looking for a way to use speech recognition plugins in my project, but all I have found is for Angular / ReactNative projects. Is it possible to use this feature in Ionic React?

[Malthe]

Obviously there is a way, using Ionic Cordova’s Speech Recognition Plugin

Full guide by DesignCourse

Using Ionic Cordova's Speech Recognition Plugin (Tutorial)

[emeritvs]

How can I “translate” NgModules in this example to React? The project need to have a similar .tsx file to app.module.ts? When I try to use this link example, I receive this following error:

Property ‘hasPermission/startListening’ does not exist on type ‘SpeechRecognition’.

My File:

import React from ‘react’;

import { IonContent, IonPage } from ‘@ionic/react’;

import { SpeechRecognition } from ‘@ionic-native/speech-recognition’;

import toastr from ‘toastr’;

import ‘…/…/toastr.min.css’;

class Contato extends React.Component<{}, { isRecording: boolean, color: string }>{

constructor(props: any, private speechRecognition: SpeechRecognition){

    super(props);

    this.state = {
        isRecording: false,

        color: 'green',

    };

    this.start = this.start.bind(this);

}

componentWillMount(){

    this.speechRecognition.hasPermission()

    .then((hasPermission: boolean) => {

        if (!hasPermission) {

        this.speechRecognition.hasPermission()

            .then(

                () => console.log('Granted'),

                () => console.log('Denied')

            )

        }

    });

}

start() {

    this.speechRecognition.startListening()

    .subscribe(

        (matches: Array<string>) => {

            let resultado = matches[0];

            this.setState({ bgcolor: resultado });

        },

        (onerror: any) => console.log('error:', onerror)

    )

}

render(){

    return (

        

        <IonPage>

            <IonContent className="mt-5">

                <div className="mt-5">

                    <button className="btn btn-info" onClick={this.start}> Start</button>

                    <button className="btn btn-info" > Stop </button>

                </div>

            </IonContent>

        </IonPage>

    );

}

};

export default Contato;

[Malthe]

I’m not sure what you did wrong, but try to follow this video!

[emeritvs]

I’ve already watch this video and I only didn’t the Angular imports and command “ionic cordova plugin add cordova-plugin-name”, when I try this command, the console show this error (then I install the plugin using the steps of link ):