How to Implement Voice-to-Text in React Native

Introduction

In this article, we will walk you through integrating the @react-native-voice/voice library into our React Native project to enable voice-to-text functionality. This feature can be used in various scenarios, such as dictation apps, voice commands, or search-by-voice features.

1. Installation

First, you need to install the @react-native-voice/voice package. You can do so by running:

npm install @react-native-voice/voice

2. Android Configuration

For Android, you need to request microphone permissions in the AndroidManifest.xml file. Add the following line:

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

3. iOS Configuration

For iOS, you need to add microphone and speech recognition permissions in your Info.plist file:

<key>NSMicrophoneUsageDescription</key>
<string>Description of why you require the use of the microphone</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>Description of why you require the use of the speech recognition</string>

Make sure the descriptions accurately explain why your app requires these permissions.

4. Handling Voice Recognition

Here’s how you can set up the library in your React Native component.

a. Importing Voice

import Voice, {
  SpeechRecognizedEvent,
  SpeechResultsEvent,
  SpeechErrorEvent,
} from "@react-native-voice/voice";

b. State Setup

const [recognized, setRecognized] = useState("");
const [pitch, setPitch] = useState("");
const [error, setError] = useState("");
const [end, setEnd] = useState("");
const [started, setStarted] = useState("");
const [results, setResults] = useState([]);
const [partialResults, setPartialResults] = useState([]);

c. Initializing Voice Event Handlers

Inside the useEffect hook, initialize the various event handlers:

useEffect(() => {
  Voice.onSpeechStart = (e) => {
    console.log("onSpeechStart: ", e);
    setStarted("√");
  };

  Voice.onSpeechRecognized = (e) => {
    console.log("onSpeechRecognized: ", e);
    setRecognized("√");
  };

  Voice.onSpeechEnd = (e) => {
    console.log("onSpeechEnd: ", e);
    setEnd("√");
  };

  Voice.onSpeechError = (e) => {
    console.log("onSpeechError: ", e);
    setError(JSON.stringify(e.error));
  };

  Voice.onSpeechResults = (e) => {
    console.log("onSpeechResults: ", e);
    setResults(e.value);
  };

  Voice.onSpeechPartialResults = (e) => {
    console.log("onSpeechPartialResults: ", e);
    setPartialResults(e.value);
  };

  Voice.onSpeechVolumeChanged = (e) => {
    console.log("onSpeechVolumeChanged: ", e);
    setPitch(e.value);
  };

  return () => {
    Voice.destroy().then(Voice.removeAllListeners);
  };
}, []);

d. Starting and Stopping Recognition

To start, stop, cancel, or destroy recognition, define the following functions:

const startRecognizing = async () => {
  try {
    await Voice.start("en-US");
  } catch (e) {
    console.error(e);
  }
};

const stopRecognizing = async () => {
  try {
    await Voice.stop();
  } catch (e) {
    console.error(e);
  }
};

const cancelRecognizing = async () => {
  try {
    await Voice.cancel();
  } catch (e) {
    console.error(e);
  }
};

const destroyRecognizer = async () => {
  try {
    await Voice.destroy();
  } catch (e) {
    console.error(e);
  }
  resetStates();
};

const resetStates = () => {
  setRecognized("");
  setPitch("");
  setError("");
  setStarted("");
  setResults([]);
  setPartialResults([]);
  setEnd("");
};

5. UI Implementation

Now, create a simple UI to interact with the voice recognition system:

<View style={styles.container}>
  <Text style={styles.welcome}>Welcome to React Native Voice!</Text>
  <Text style={styles.instructions}>Press the button and start speaking.</Text>
  <Text style={styles.stat}>{`Started: ${started}`}</Text>
  <Text style={styles.stat}>{`Recognized: ${recognized}`}</Text>
  <Text style={styles.stat}>{`Pitch: ${pitch}`}</Text>
  <Text style={styles.stat}>{`Error: ${error}`}</Text>
  <Text style={styles.stat}>Results</Text>
  {results.map((result, index) => (
    <Text key={`result-${index}`} style={styles.stat}>{result}</Text>
  ))}
  <Text style={styles.stat}>Partial Results</Text>
  {partialResults.map((result, index) => (
    <Text key={`partial-result-${index}`} style={styles.stat}>{result}</Text>
  ))}
  <Text style={styles.stat}>{`End: ${end}`}</Text>

  <TouchableHighlight onPress={startRecognizing}>
    <Text style={styles.action}>Start</Text>
  </TouchableHighlight>
  <TouchableHighlight onPress={stopRecognizing}>
    <Text style={styles.action}>Stop Recognizing</Text>
  </TouchableHighlight>
  <TouchableHighlight onPress={cancelRecognizing}>
    <Text style={styles.action}>Cancel</Text>
  </TouchableHighlight>
  <TouchableHighlight onPress={destroyRecognizer}>
    <Text style={styles.action}>Destroy</Text>
  </TouchableHighlight>
</View>

6. Styling

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
    marginTop: 33,
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  action: {
    textAlign: "center",
    color: "#0000FF",
    marginVertical: 5,
    fontWeight: "bold",
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
  },
  stat: {
    textAlign: "center",
    color: "#B0171F",
    marginBottom: 1,
  },
});

7. Notes

• Voice recognition may not work on Android emulators; testing on a real device is recommended.
• On iOS, crashes can occur if the required permissions are not added correctly to the Info.plist.

Conclusion

By following the steps in this guide, you can quickly integrate voice-to-text functionality into your React Native app using the @react-native-voice/voice library. Whether you're developing hands-free interfaces or simply enhancing user interaction, this tool can be a powerful addition to your app.