【React Native】「react-native-tts」ライブラリでテキストを読み上げる

React Native で開発中のアプリに「react-native-tts」というライブラリを導入したのでその手順をまとめ。
なお、こちらはタイトルにある通り、テキスト読み上げ機能を実装できるライブラリです。

GitHub のページはこちら。

GitHub – ak1394/react-native-tts: React Native Text-To-Speech library for Android and iOS
https://github.com/ak1394/react-native-tts

まず、ライブラリを下記コマンドでインストールします。

npm install --save react-native-tts

// iOS の場合は下記も実行する
npx pod-install

上記が完了したら、実際にテキスト読み上げ機能を実装していきます。
まず、テキスト読み上げ機能を実装したいページに下記を追加します。

import Tts from 'react-native-tts';

次に、テキスト読み上げ機能の初期設定を行います。
私は componentDidMount() 内で行いました。

componentDidMount() {
  // テキスト読み上げ機能を初期化
  Tts.getInitStatus().then(() => {
    Tts.setDefaultLanguage('ja-JP');
    Tts.setDefaultRate(0.5);
  });
}

私の場合、読み上げたい文章が日本語だったので、setDefaultLanguage() で ja-JP を指定し、読み上げ速度を 0.5 で設定しています。
読み上げの速度に関しては、実際に適当なテキストを読み上げさせてみて調整するのがいいと思います。
個人的には、0.5 くらいが聞きとりやすいかなと思います。

あとは、任意のタイミングで下記を実行して、テキストを読み上げます。

// テキスト読み上げを実行
Tts.speak([読み上げたい文章]);

処理としては以上です！

なお、実際に上記を実行すると、ワーニングが表示されるのですが、どうやらこの警告は無視しても問題ないそうです。
気になる場合は、警告を非表示にする設定を追加するなどして対応してください。

以上、React Native でテキスト読み上げ機能を実装できるライブラリ「react-native-tts」で、テキスト読み上げ機能を実装する方法についてでした。
ご参考になれば幸いです。