@ascendtis/react-native-voice-to-text

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

Method	Description	Return Type
startListening()	Start speech recognition	Promise<string>
stopListening()	Stop speech recognition	Promise<string>
destroy()	Clean up speech recognition resources	Promise<string>
getRecognitionLanguage()	Get current recognition language	Promise<string>
setRecognitionLanguage(languageTag)	Set recognition language (e.g., 'en-US')	Promise<boolean>
isRecognitionAvailable()	Check if speech recognition is available on device	Promise<boolean>
getSupportedLanguages()	Get list of supported language codes	Promise<string[]>
addEventListener(eventName, callback)	Add event listener	EmitterSubscription
removeAllListeners(eventName)	Remove all listeners for event	void

Events

Event	Description	Data
VoiceToTextEvents.START	Speech recognition started	null
VoiceToTextEvents.BEGIN	User began speaking	null
VoiceToTextEvents.END	Speech recognition ended	null
VoiceToTextEvents.ERROR	Error occurred	{ code: number, message: string }
VoiceToTextEvents.RESULTS	Final results obtained	{ value: string, results: { transcriptions: Array<{ text: string, confidence: number }> } }
VoiceToTextEvents.PARTIAL_RESULTS	Partial results as user speaks	{ value: string, results: { transcriptions: Array<{ text: string }> } }
VoiceToTextEvents.VOLUME_CHANGED	Volume level changed	{ value: number }
VoiceToTextEvents.AUDIO_BUFFER	Raw 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