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

Events

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