How do you add speech recognition to a React or React Native app?

Which library you need depends on where the app runs. A React web app runs in a browser, so it uses the browser's speech recognition. A React Native app runs on a phone, so it uses the phone's own recognizers through a library. Pick the platform first, then the package. Some libraries cover both, but the setup and the limits differ.

A React web app uses the browser's Web Speech API

The Web Speech API is the browser interface behind most React web examples. The react-speech-recognition package wraps it in a React hook that gives a component the transcript and functions to start and stop the microphone. Its README says that browser support "is currently limited, with Chrome having the best experience" ¹, so treat Chrome as the baseline and everything else as a question to test.

Support is the main constraint. In Chrome, the unprefixed SpeechRecognition name is available from version 139, and the prefixed webkitSpeechRecognition name from version 33 ². Firefox lists its support only as preview ³. The README's browser list is dated May 2021 ⁴, so use the current MDN data for support rather than that list. A React app that serves Firefox users needs a fallback that works without the browser API.

The question on which browsers support speech recognition gives the current picture in more detail.

A React Native app needs a native library

A React Native app does not run in a browser, so the Web Speech API is not the route. The expo-speech-recognition README says that you can use its module to call the native APIs directly, and that its listener events are similar to the Web Speech API ⁵. The similarity means browser code ports with changes, not from scratch. Read the README's Speech Recognition Events section before you port, because some names and fields differ.

Expo projects without native folders need a development build

If your Expo project has no ios or android directory, the README says you need to create a development build ⁶. Plan for that step before you write the feature, because the library's native code has to be part of the app you run. The README's Installation section gives the setup steps, and its Permissions section covers the microphone prompt.

On-device recognition is a request the device may not grant

The expo-speech-recognition options include requiresOnDeviceRecognition, which defaults to false. The README describes it as "Prevent device from sending audio over the network. Only enabled if the device supports it." ⁷ The option takes effect only where the device supports on-device recognition. Check it on each device class you support, and do not describe audio as staying on the phone until you have tested that case.

If the privacy of the audio matters to your users, read the guide to on-device versus cloud recognition before you choose the setting.

It depends: the browser, the device or a cloud service

Choose by the constraint that matters most.

• A web-only product with a fallback: use the browser API, and handle its errors as the network error question explains.
• A phone app that must keep audio local: use a native module, set the on-device option, and test it on each device.
• Accuracy across many accents or languages: a cloud or local model may beat the browser engine, so measure it on your own recordings before you pick. The speech to text API comparison lists the options.

What to do

1. Decide the platform. A web app uses the browser API. A phone app uses a native module.
2. For the web, use a hook or the raw API. Check for the constructor, show a fallback, and follow the JavaScript guide for the code.
3. For Expo, install the library and create a development build if the project has no native folders.
4. Set requiresOnDeviceRecognition where privacy matters, then test on the devices you support.
5. Measure accuracy on your own audio before you commit to an engine.

This question is part of our guide to speech recognition in Python and the speech recognition overview. The error cases are in the network error question, and the game engines are covered in the Unity and Unreal question.