React-native-voice-to-text NPM

react-native-voice-to-text

React Native Voice-to-Text is a module that facilitates the conversion of spoken words into text within your React Native mobile applications. With this module, users can dictate text input, enabling hands-free interaction and enhancing accessibility. Integrate voice recognition and transcription capabilities seamlessly into your app to provide a convenient and intuitive user experience.

Installation

Install the package via npm:

npm install react-native-voice-to-text

Install the package via yarn:

yarn add react-native-voice-to-text

Android Setup

To ensure proper functionality on Android, you need to add the following permission to your AndroidManifest.xml file:

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

This permission allows the app to record audio, which is essential for voice recognition.

Usage

Import the functions provided by the package and use them in your React Native components:

import * as React from 'react';

import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { startRecognition, stopRecognition } from 'react-native-voice-to-text';


export default function App() {
  const [language, setLanguage] = React.useState('en-IN');

  async function startSpeechToText() {
    console.log('start speach recogination');
    try {
      const result = await startRecognition(language);
      console.log('Speech recognized: ', result);
    } catch (error) {
      console.error(error);
    }
  }
  function stopSpeechToText() {
    stopRecognition();
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.box} onPress={startSpeechToText}>
        <Text style={styles.text}>Start Speech-to-Text</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={stopSpeechToText}>
        <Text style={styles.text}>STOP Speech-to-Text</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'black',
  },
  text: {
    color: 'white',
  },
  box: {
    marginVertical: 20,
  },
});