SpeechRecognition Ionic React

import React from 'react';
import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
import toastr from 'toastr';
import '../../toastr.min.css';


class Contato extends React.Component<{}, { matches: string, isRecording: boolean }>{
  constructor(props: any, private speechRecognition: SpeechRecognition ){
    super(props);

    this.state = {
      matches: '',
      isRecording: false,
    };


    this.checkAvaliable = this.checkAvaliable.bind(this);
    this.checkPermissions = this.checkPermissions.bind(this);
    this.getPermissions = this.getPermissions.bind(this);
    this.startListening = this.startListening.bind(this);
    this.stopListening = this.stopListening.bind(this);

  }

  checkAvaliable = () => {
    // Check feature available
    this.speechRecognition.isRecognitionAvailable()
    .then((available: boolean) => console.log(available))
  }

  checkPermissions = () => {
    // Check permission
    this.speechRecognition.hasPermission()
    .then((hasPermission: boolean) => console.log(hasPermission))
  }

  getLanguageList = () => {
    // Get the list of supported languages
    this.speechRecognition.getSupportedLanguages()
    .then(
      (languages: string[]) => console.log(languages),
      (error) => console.log(error)
    )
  }

  getPermissions = () => {
    // Request permissions
    this.speechRecognition.requestPermission()
    .then(
      () => console.log('Granted'),
      () => console.log('Denied')
    )
  }

  startListening = () => {
    let options = {
      language: 'pt-BR',
    };

    // Start the recognition process
    this.speechRecognition.startListening(options)
    .subscribe(
      (matches: string[]) => console.log(matches),
      (onerror) => console.log('error:', onerror)
    )
  }

  stopListening = () => {
    this.speechRecognition.stopListening().then(() => {
        this.setState({isRecording: false})
    });
  }

  render(){
    return(
    <>
      <div className="mb-3">
        <h3>O que eu entendi...</h3>
        <span>{this.state.matches}</span>
      </div>
      <div className="row mt-5">
        <div className="col-12">
          <button className="btn btn-tiber w-100" onClick={this.checkAvaliable}>Check Avaliable</button>
        </div>
        <div className="col-12">
          <button className="btn btn-tiber w-100" onClick={this.checkPermissions}>Check Permissions</button>
        </div>
        <div className="col-12">
          <button className="btn btn-tiber w-100" onClick={this.getLanguageList}>Get Languages</button>
        </div>
        <div className="col-12">
          <button className="btn btn-tiber w-100" onClick={this.getPermissions}>Get Permission</button>
        </div>
        <div className="col-12">
          <button className="btn btn-tiber w-100" onClick={this.startListening}>Start Listening</button>
        </div>
      </div>
    </>
    );
  }


}



export default Contato;