How to Add Speech-to-Intent to React Native Apps

As voice technology continues to evolve, voice commands is becoming foundational to human-computer interaction. Unlike traditional spoken language understanding systems that simply transcribe words, Speech-to-Intent infers meaning directly from utterances. By converting spoken language directly into structured intents and actions, it allows apps to interpret what the user wants, and perform actions based on that. This ability brings us closer to true conversational interfaces.

Another major leap for voice technology is the ability to run on-device. Offline processing keeps interactions fast, private, and reliable without needing an internet connection. By keeping audio data on-device, apps protect user privacy, reduce latency, and avoid dependency on the cloud—making on-device voice commands ideal on mobile where connectivity often fluctuates.

For mobile developers, offline voice commands opens powerful possibilities. Users can naturally issue commands, ask questions, or trigger complex actions wherever they go. Because mobile devices are always moving, stable connectivity isn't guaranteed—making offline capability essential for consistent, dependable voice experiences.

This guide shows how to add custom, on-device voice commands to a React Native app with Rhino Speech-to-Intent.

What you'll learn:

• Setting up audio recording permissions for iOS and Android
• Adding custom voice commands with Rhino

What you need:

• React Native 0.62.2+
• Android 5.0+ (API 21+)
• iOS 13.0+

Configure Microphone Permissions

Before we begin—integrating voice commands requires recording audio, which means the user must grant permission. Set up your project to request and handle these permissions:

iOS Permissions

Add the following block to Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>[Permission explanation]</string>

Android Permissions

Add the following block to AndroidManifest.xml:

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

Before You Start: Add Wake Word Detection

If you haven't already, consider adding wake word detection first. This allows your app to "wake up" when a user says a simple phrase like "Hey AppName." Wake word detection and voice commands complement each other perfectly—you can design your app to listen for commands only when needed, creating a truly hands-free experience while saving compute resources.

Add Voice Commands with Rhino

1. Install Rhino React Native Dependencies: To use Rhino Speech-to-Intent in your React Native project, install @picovoice/react-native-voice-processor and @picovoice/rhino-react-native:

npm install @picovoice/react-native-voice-processor @picovoice/rhino-react-native

2. Get Your Picovoice Access Key: Sign up for a free Picovoice Console account and obtain your AccessKey. The AccessKey is only required for authentication and authorization.

3. Train Custom Voice Commands: Create a custom context using the Picovoice Console. This is where you define the voice commands you want to be able to handle. Refer to the syntax cheat sheet to learn how to build your context.

4. Add Context Files to Your Project: Once you've created your context, you will need to download two context files—one for Android, and one for iOS. The files will have a .rhn extension. In the Android subproject, add the Android context file to the assets folder (${ANDROID_APP}/src/main/assets). In the iOS subproject, add the iOS context file to the Copy Bundle Resources step. In the following code examples, this file will be referred to as ${CONTEXT_FILE_PATH}.

5. Using Non-English Model Files (Optional): The English model file is built into Rhino, so if your custom context is in English, you can skip this step. Otherwise, you will need the corresponding Rhino model file. Similar to step 4, add this file to the assets folder for Android, and Copy Bundle Resources step for iOS. In the following code examples, this file will be referred to as ${MODEL_FILE_PATH}.

Step-by-Step Code Implementation

First, we'll break down the key components of the Rhino React Native SDK. At the end is a fully implemented component that you can simply drop into your project for a quick proof of concept.

1. Define a function to handle the intent that will be returned by RhinoManager (next step). The intent will be of class RhinoInference. Also define an error handler callback.

import { RhinoInference } from '@picovoice/rhino-react-native';

// ...
  const inferenceCallback = (inference: RhinoInference) => {
    if (inference.isUnderstood) {
       // take action based on inferred intent and slot values
       console.log(inference.intent);
       console.log(inference.slots);
    } else {
      // handle unsupported commands
    }
  };

  const processErrorCallback = (error) => {
    console.error(`Error during process: ${error}`);
  };

2. Create an instance of RhinoManager. Be sure to replace the placeholders, and pass in your inferenceCallback() and processErrorCallback() functions.

import React, { useRef } from "react";
// import { Platform } from "react-native";
import { RhinoManager } from '@picovoice/rhino-react-native';

// ...
  const rhinoManager = useRef(null);
  
  rhinoManager.current = await RhinoManager.create(
    "${ACCESS_KEY}", // Your Picovoice Console AccessKey
    "${CONTEXT_FILE_PATH}", // e.g. `beleuchtung_${Platform.OS}.rhn`
    inferenceCallback,
    processErrorCallback,
    "${MODEL_FILE_PATH}", // e.g. `rhino_params_de.rhn` (if non-English context)
  );

3. To start listening for voice commands, call process(). When RhinoManager detects that something was said, it will automatically stop processing, whether it understood the command or not. To start listening again for the next command, call process() again.

await rhinoManager.current.process();

4. Once you no longer need RhinoManager, be sure to release the resources acquired by calling delete().

await rhinoManager.current.delete();

Complete Code Implementation

Below is a fully implemented component you can copy into your project to see Rhino in action. Be sure to replace the placeholders ${ACCESS_KEY}, ${CONTEXT_FILE_PATH}, and ${MODEL_FILE_PATH} (if applicable).

import React, { useRef, useState } from "react";
import { Button, Platform, View } from "react-native";
import { RhinoManager, RhinoInference } from '@picovoice/rhino-react-native';

const ACCESS_KEY = "${ACCESS_KEY}"; // Your Picovoice Console AccessKey
const CONTEXT_FILE_PATH = "${CONTEXT_FILE_PATH}"; // e.g. `beleuchtung_${Platform.OS}.rhn`
const MODEL_FILE_PATH = "${MODEL_FILE_PATH}"; // e.g. "rhino_params_de.pv" (if non-English context)

enum RhinoState { Initial, Created, Listening }

export default function Rhino() {
  const [rhinoState, setRhinoState] = useState(RhinoState.Initial);
  const rhinoManager = useRef(null);

  const inferenceCallback = (inference: RhinoInference) => {
    setRhinoState(RhinoState.Created);
    if (inference.isUnderstood) {
      console.log(inference);
    } else {
      console.log('Inference not understood')
    }
  };

  const processErrorCallback = (error) => {
    console.error(`Error during process: ${error}`);
  };

  const createRhino = async () => {
    try {
      rhinoManager.current = await RhinoManager.create(
        ACCESS_KEY,
        CONTEXT_FILE_PATH,
        inferenceCallback,
        processErrorCallback,
        MODEL_FILE_PATH, // (if non-English context)
      );
      setRhinoState(RhinoState.Created);
    } catch (err) {
      console.error(err);
    }
  }

  const startListening = async () => {
    try {
      await rhinoManager.current.process();
      setRhinoState(RhinoState.Listening);
    } catch (err) {
      console.error(err);
    }
  }

  const deleteRhino = async () => {
    try {
      await rhinoManager.current.delete();
      setRhinoState(RhinoState.Initial);
    } catch (err) {
      console.error(err);
    }
  }

  return (
    <View>
      <Button title="Create Rhino" onPress={createRhino} disabled={rhinoState !== RhinoState.Initial} />
      <Button title="Start Listening" onPress={startListening} disabled={rhinoState !== RhinoState.Created} />
      <Button title="Delete Rhino" onPress={deleteRhino} disabled={rhinoState !== RhinoState.Created} />
    </View>
  );
}

To see a complete working project, check out Rhino's React Native demo on GitHub. For more in-depth information, refer to the Rhino React Native SDK quick start guide.

Frequently Asked Questions