Rhino — React Native Quick Start

Platforms

• Android 4.4+ (API 19+)
• iOS 9.0+

Requirements

• Picovoice Account and AccessKey
• React Native 0.62.2+

Picovoice Account & AccessKey

Signup or Login to Picovoice Console to get your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

1. Setup the React Native environment.

2. Install the npm packages:

   • @picovoice/rhino-react-native
   • @picovoice/react-native-voice-processor

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

3. Enable the proper permission for recording with the hardware's microphone on both iOS and Android:

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

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

Usage

Request audio recording permissions from the user:

const recordAudioRequest = async () => {
  if (Platform.OS == 'android') {
    // Android requires an explicit call to ask for permission
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: 'Microphone Permission',
        message: '[Permission explanation]',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      }
    );
    return (granted === PermissionsAndroid.RESULTS.GRANTED)
  } else {
    // iOS will automatically ask for permission
    return true;
  }
};

const hasPermission = await recordAudioRequest();

Create an instance of RhinoManager that infers intent from spoken commands within a given context:

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

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

let rhinoManager = await RhinoManager.create(
  "${ACCESS_KEY}",
  "${CONTEXT_FILE_PATH}",
  inferenceCallback
);

Start audio capture and intent inference with:

await rhinoManager.start();

Stop with:

await rhinoManager.stop();

Free resources used by RhinoManager:

rhinoManager.delete();

Custom Contexts

Create a custom context using the Picovoice Console. Download the custom context file (.rhn) and create an instance of RhinoManager using the .create constructor.

• Android custom models must be added to ./android/app/src/main/assets/.

• iOS custom models can be added anywhere under ./ios, but they must be included as a bundled resource in XCode by right-clicking on the Navigation tab, and clicking Add Files To ....

Non-English Languages

Use the corresponding model file (.pv), to detect non-English wake words. The model files for all supported languages are available on the Rhino GitHub repository.

Pass in the model file using the modelPath argument:

let rhinoManager = await RhinoManager.create(
  "${ACCESS_KEY}",
  "${CONTEXT_FILE_PATH}",
  inferenceCallback,
  processErrorCallback,
  "${MODEL_FILE_PATH}"
);

Demo

For the Rhino React Native SDK, there is a React Native demo project available on the Rhino GitHub repository.

Setup

Clone the Rhino repository from GitHub:

git clone --recurse-submodules https://github.com/Picovoice/rhino.git

Usage

1. Install dependencies and setup environment:

cd rhino/demo/react-native

npm run android-install
# or
npm run ios-install

2. Connect a mobile device or launch a simulator and run:

npm run android-run
# or
npm run ios-run

For more information on our Rhino demos for React Native, head over to our GitHub repository.

Resources

Packages

• @picovoice/rhino-react-native
• @picovoice/react-native-voice-processor

API

• rhino-react-native API Docs

GitHub

• Rhino React Native SDK on GitHub
• Rhino React Native Demo on GitHub

Benchmark

• Speech-to-Intent Benchmark

Further Reading

• Add Voice Recognition to React Native Without Adding the Cloud

Videos

• React Native Clock App with Offline Voice Recognition