Porcupine Wake Word
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/porcupine-react-native
   • @picovoice/react-native-voice-processor

npm install @picovoice/react-native-voice-processor @picovoice/porcupine-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 PorcupineManager that detects the included built-in wake words porcupine and bumblebee:

import {PorcupineManager, BuiltInKeywords} from '@picovoice/porcupine-react-native';

let detectionCallback = (keywordIndex) => {
  if (keywordIndex === 0) {
    // detected `porcupine`
  } else if (keywordIndex === 1) {
    // detected `bumblebee`
  }
};

let porcupineManager = await PorcupineManager.fromBuiltInKeywords(
  "${ACCESS_KEY}",
  [BuiltInKeywords.Porcupine, BuiltInKeywords.Bumblebee],
  detectionCallback
);

Start audio capture and wake word detection with:

await porcupineManager.start();

Stop with:

await porcupineManager.stop();

Free resources used by PorcupineManager:

porcupineManager.delete();

Custom Keywords

Create a custom keyword using the Picovoice Console . Download the custom wake word file (.ppn) and add them to your 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 ....

Create an instance of PorcupineManager using the .fromKeywordPaths constructor:

let porcupineManager = await PorcupineManager.fromKeywordPaths(
  "${ACCESS_KEY}",
  ["${KEYWORD_FILE_PATH}"],
  detectionCallback
);

Keyword path arguments are relative to the platform-specific asset/resource directory.

Alternatively, if the keyword 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 file (.pv), to detect non-English wake words. The model files for all supported languages are available on the Porcupine GitHub repository .

Add the model file to your assets/resource directory and pass in the relative file path using the modelPath argument:

let porcupineManager = await PorcupineManager.fromKeywordPaths(
  "${ACCESS_KEY}",
  ["${KEYWORD_FILE_PATH}"],
  detectionCallback,
  processErrorCallback,
  "${MODEL_FILE_PATH}"
);

Alternatively, if the model file is deployed to the device with a different method, the absolute path to the file on device can be used.

Demo

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

Setup

Clone the Porcupine repository from GitHub:

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

Usage

1. Install dependencies and setup environment:

cd porcupine/demo/react-native

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

2. Connect a mobile device or launch a simulator. Then run the android-run or ios-run and replace ${LANGUAGE} with the language code of your choice (e.g. de -> German, ko -> Korean). To see a list of available languages, command without a language code.

npm run android-run ${LANGUAGE}
# or
npm run ios-run ${LANGUAGE}

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

Resources