React-native-speak NPM

react-native-speak

A wonderful TTS (text-to-speech) library for React Native.

Installation

Using npm:

npm install --save react-native-speak

or using yarn:

yarn add react-native-speak

Linking

Automatic

react-native link react-native-speak

For iOS users using Pods: You need to run pod install after running the above link command inside your ios folder.

Manual

Add the following line to your build targets in your Podfile

pod 'RNSpeak', :path => '../node_modules/react-native-speak'

Then run pod install

In XCode, in the project navigator:

Right click Libraries
Add Files to your project's name
Go to node_modules/react-native-speak
Add the .xcodeproj file

In XCode, in the project navigator, select your project.

Add the libRNSpeak.a from the RNSpeak project to your project's Build Phases ➜ Link Binary With Libraries
Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic).
Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React
Mark both as recursive (should be OK by default).

Run your project (Cmd+R)

optional in android/build.gradle:

...
  ext {
    // dependency versions
    googlePlayServicesVersion = "<Your play services version>" // default: "+"
    compileSdkVersion = "<Your compile SDK version>" // default: 23
    buildToolsVersion = "<Your build tools version>" // default: "25.0.2"
    targetSdkVersion = "<Your target SDK version>" // default: 22
  }
...

in android/app/build.gradle:

dependencies {
    ...
    implementation "com.facebook.react:react-native:+"  // From node_modules
+   implementation project(':react-native-speak')
}

in android/settings.gradle:

...
include ':app'
+ include ':react-native-speak'
+ project(':react-native-speak').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-speak/android')

in MainApplication.java:

+ import com.truckmap.RNSpeak.RNSpeak;

  public class MainApplication extends Application implements ReactApplication {
    //......

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
+         new RNSpeak(),
          new MainReactPackage()
      );
    }

    ......
  }

NOTE: If you faced with this error: Could not resolve all files for configuration ':react-native-speak:debugCompileClasspath'., in build.gradle put google() in the first line (according to https://stackoverflow.com/a/50748249)

in android/build.gradle:

allprojects {
    repositories {
+       google()
        ...
    }
}

Usage

import Speech from 'react-native-speak';

API

Method	Return Type	iOS	Android
speak()	`Promise<any>`	✅	✅

speak()

speak(text: string)

Speaks a phrase.

Examples

Speech.speak("hello world!"); // speaks the given phrase.

Events

onSpeechStart

Fired when speech has started.

Examples

import { NativeEventEmitter, NativeModules } from 'react-native'
const speechEventEmitter = new NativeEventEmitter(NativeModules.RNSpeak)

speechEventEmitter.addListener('onSpeechStart', () => {
  // callback when finished
});

onSpeechEnd

Fired when speech has ended.

Examples

import { NativeEventEmitter, NativeModules } from 'react-native'
const speechEventEmitter = new NativeEventEmitter(NativeModules.RNSpeak)

speechEventEmitter.addListener('onSpeechEnd', () => {
  // callback when finished
});

onSpeechError

Fired when an error is found in the speech pipeline. (TBD)

Examples

import { NativeEventEmitter, NativeModules } from 'react-native'
const speechEventEmitter = new NativeEventEmitter(NativeModules.RNSpeak)

speechEventEmitter.addListener('onSpeechError', error => {
  console.error(error);
});