How to Build a Speech to Text Dictation App in React Native

In this tutorial, we will build a speech to text dictation app using React Native. This app will allow users to speak into their device and have the words transcribed into text. We will be using the React Native Speech Recognition library to build this app.

Prerequisites

Before we begin, you should have a basic understanding of React Native and JavaScript. You should also be familiar with the command line, as we will be using it to install dependencies and run our app.

Creating a React Native Project

We will create our React Native project using the command line. To do this, we will use the react-native init command. This will create a project with the default name MyProject.

$ react-native init MyProject

Once the project has been created, you should see a folder named MyProject in your current directory. Change into this directory and open it in your favorite text editor.

Installing Dependencies

We will be using the React Native Speech Recognition library to build our app. Install this library as a dependency in your project by running the following command.

$ npm install react-native-speech-recognition --save

Building the UI

Now that we have our project set up and the dependencies installed, we can start building the UI for our app. We will start by creating a basic layout for our app.

Create a new file named App.js inside the MyProject directory and add the following code. This code will create a basic layout for our app with a button to start the voice recognition.

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Speech to Text App</Text>
        <Button 
          title="Start"
          onPress={() => alert('Start button pressed!')}
        />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
};

Integrating a Voice Recognition Library

Now that we have our basic UI set up, we can start integrating the React Native Speech Recognition library.

Import the library at the top of your App.js file and add the following code to the render() method. This code will call the startSpeechRecognition() method when the button is pressed.

import SpeechRecognition from 'react-native-speech-recognition';

// ...

render() {
  // ...
  <Button 
    title="Start"
    onPress={this.startSpeechRecognition}
  />
  // ...
}

// ...

startSpeechRecognition = async () => {
  try {
    const granted = await SpeechRecognition.requestPermission();
    if (granted) {
      console.log('Permission granted!');
    }
  } catch (err) {
    console.log(err);
  }
};

Building Voice Recognition in React Native

We can now start building out the voice recognition functionality. To do this, we will use the startSpeechRecognizer() method provided by the library. This method takes a number of arguments that you can find in the documentation.

Add the following code to the startSpeechRecognition() method to start the voice recognition.

startSpeechRecognition = async () => {
  try {
    const granted = await SpeechRecognition.requestPermission();
    if (granted) {
      console.log('Permission granted!');

      const speechRecognizer = SpeechRecognition.createSpeechRecognizer();
      speechRecognizer.onSpeechStart = () => {
        console.log('Speech has started!');
      }
      speechRecognizer.startSpeechRecognizer(
        {
          onResults: (result) => {
            console.log('Speech has ended!');
            console.log(result);
          }
        }
      );
    }
  } catch (err) {
    console.log(err);
  }
};

This code will start the voice recognition when the button is pressed. It will log the results of the voice recognition to the console when the speech has ended.

Conclusion

In this tutorial, we have built a speech to text dictation app using React Native and the React Native Speech Recognition library. We used the startSpeechRecognizer() method to start the voice recognition and log the results to the console.

I hope this tutorial has been helpful in understanding how to build a speech to text dictation app in React Native.