Picovoice Platform
React Native Quick Start

Platforms

• Android (5.0+, API 21+)
• iOS (11.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/picovoice-react-native
   • @picovoice/porcupine-react-native
   • @picovoice/rhino-react-native
   • @picovoice/react-native-voice-processor

npm install @picovoice/react-native-voice-processor @picovoice/picovoice-react-native @picovoice/porcupine-react-native @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 PicovoiceManager using a Porcupine keyword file (.ppn), and a Rhino context file (.rhn):

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

let wakeWordCallback = () => {
  // wake word detected
};

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 picovoiceManager = await PicovoiceManager.create(
  "${ACCESS_KEY}",
  "${KEYWORD_FILE_PATH}",
  wakeWordCallback,
  "${CONTEXT_FILE_PATH}",
  inferenceCallback
);

Start audio capture and processing with:

await picovoiceManager.start();

Stop with:

await picovoiceManager.stop();

Free resources used by PicovoiceManager:

picovoiceManager.delete();

Custom Wake Words & Contexts

Create custom keywords and contexts using the Picovoice Console . Download the custom models (.ppn and .rhn) and add them to the platform projects:

• 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 ....

Alternatively, if the model files are deployed to the device with a different method, the absolute paths to the files on device can be used.

Non-English Languages

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

Add the model files to your assets/resource directory and pass in the relative paths using the porcupineModelPath and rhinoModelPath arguments:

let picovoiceManager = await PicovoiceManager.create(
  "${ACCESS_KEY}",
  "${KEYWORD_FILE_PATH}",
  wakeWordCallback,
  "${CONTEXT_FILE_PATH}",
  inferenceCallback,
  processErrorCallback,
  0.5,
  0.5,
  "${PORCUPINE_MODEL_FILE_PATH}",
  "${RHINO_MODEL_FILE_PATH}",
);

Alternatively, if the model files are deployed to the device with a different method, the absolute paths to the files on device can be used.

Demo

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

Setup

Clone the Picovoice repository from GitHub:

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

Usage

1. Install dependencies and setup environment:

cd picovoice/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 Picovoice demos for React Native, head over to our GitHub repository .

Resources