0.3.2 • Published 7 months ago

@ascendtis/react-native-voice-to-text v0.3.2

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

react-native-voice-to-text

Convert voice to text in React Native using native speech recognition capabilities on both iOS and Android.

Features

  • Utilize the device's native speech recognition API
  • Support for multiple languages
  • Real-time partial results as the user speaks
  • Volume level detection
  • Detailed transcription results with confidence scores
  • Cross-platform compatibility (iOS and Android)
  • Written in TypeScript with full type definitions

Installation

npm install react-native-voice-to-text

Permissions

iOS

You need to add the following permissions to your Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to your microphone for speech recognition</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>This app needs access to speech recognition to convert your voice to text</string>

Android

Add the following permission to your AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

For Android 6.0+ (API level 23), you also need to request the permission at runtime:

import { Platform, PermissionsAndroid } from 'react-native';

// Request microphone permission
async function requestMicrophonePermission() {
  if (Platform.OS !== 'android') return true;

  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: 'Microphone Permission',
        message: 'This app needs access to your microphone for speech recognition',
        buttonPositive: 'OK',
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (err) {
    console.warn(err);
    return false;
  }
}

API Reference

Methods

MethodDescriptionReturn Type
startListening()Start speech recognitionPromise<string>
stopListening()Stop speech recognitionPromise<string>
destroy()Clean up speech recognition resourcesPromise<string>
getRecognitionLanguage()Get current recognition languagePromise<string>
setRecognitionLanguage(languageTag)Set recognition language (e.g., 'en-US')Promise<boolean>
isRecognitionAvailable()Check if speech recognition is available on devicePromise<boolean>
getSupportedLanguages()Get list of supported language codesPromise<string[]>
addEventListener(eventName, callback)Add event listenerEmitterSubscription
removeAllListeners(eventName)Remove all listeners for eventvoid

Events

EventDescriptionData
VoiceToTextEvents.STARTSpeech recognition startednull
VoiceToTextEvents.BEGINUser began speakingnull
VoiceToTextEvents.ENDSpeech recognition endednull
VoiceToTextEvents.ERRORError occurred{ code: number, message: string }
VoiceToTextEvents.RESULTSFinal results obtained{ value: string, results: { transcriptions: Array<{ text: string, confidence: number }> } }
VoiceToTextEvents.PARTIAL_RESULTSPartial results as user speaks{ value: string, results: { transcriptions: Array<{ text: string }> } }
VoiceToTextEvents.VOLUME_CHANGEDVolume level changed{ value: number }
VoiceToTextEvents.AUDIO_BUFFERRaw audio buffer available{ buffer: string } (Base64 encoded)

Basic Usage

import React, { useEffect, useState } from 'react';
import { View, Button, Text } from 'react-native';
import VoiceToText, { VoiceToTextEvents } from 'react-native-voice-to-text';

export default function SpeechRecognitionExample() {
  const [results, setResults] = useState('');
  const [isListening, setIsListening] = useState(false);
  
  useEffect(() => {
    // Set up event listeners
    const resultsListener = VoiceToText.addEventListener(
      VoiceToTextEvents.RESULTS,
      (event) => {
        setResults(event.value);
      }
    );
    
    const startListener = VoiceToText.addEventListener(
      VoiceToTextEvents.START,
      () => setIsListening(true)
    );
    
    const endListener = VoiceToText.addEventListener(
      VoiceToTextEvents.END,
      () => setIsListening(false)
    );
    
    // Clean up
    return () => {
      VoiceToText.destroy();
      resultsListener.remove();
      startListener.remove();
      endListener.remove();
    };
  }, []);
  
  const toggleListening = async () => {
    try {
      if (isListening) {
        await VoiceToText.stopListening();
      } else {
        await VoiceToText.startListening();
      }
    } catch (error) {
      console.error(error);
    }
  };
  
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{results || 'Say something...'}</Text>
      <Button
        title={isListening ? 'Stop' : 'Start'}
        onPress={toggleListening}
      />
    </View>
  );
}

Known Issues and Fixes

Android

  • Thread Error: SpeechRecognizer operations must run on the main thread in Android. This is handled internally in the latest version.
  • Type Conversion: ArrayList type conversion for language lists is now properly handled.

iOS

  • Speech recognition requires user permission prompt which is handled via Info.plist settings.

License

MIT


Made with create-react-native-library