【React Native】「react-native-system-setting」ライブラリを使ってアプリから端末の音量を操作する

以前の「【React Native 】Android端末の音量を取得する」という記事で、「react-native-system-setting」というライブラリを使って端末の音量を取得する方法についてご紹介しましたが、今回は音量を設定する方法についてです。

今回使用するのは、.setVolume() と .addVolumeListener()、 .removeVolumeListener() です。
各メソッドの使い方については、下記のページが参考になりました。

react-native-system-setting/API.md at master · c19354837/react-native-system-setting
https://github.com/c19354837/react-native-system-setting/blob/master/API.md

実装方法ですが、サンプルコードはこちらです。
まず、音量の取得と更新は下記のコードで行います。

/**
 * 音量を取得する
 */
this.getVolume = () => {
  SystemSetting.getVolume().then((volume)=>{
    this.setState({ volume: volume });
  });
}

/**
 * 音量を変更する
 */
this.chengeVolume = volume => {
  this.setState({ volume: volume });
  SystemSetting.setVolume(volume, { type: 'music', playSound: false, showUI: true });
}

this.getVolume() は、componentDidMount() 内で呼び出し、this.chengeVolume() は下記のようにスライダーが変更されたタイミングで呼び出すようにしました。

<Slider
  value={this.state.volume}
  onValueChange={this.chengeVolume}
  maximumValue={1}
  minimumValue={0} />

なお、スライダーは、react-native-elements の Slider コンポーネントを使用しています。

上記のように実装すれば、スライダーの値が変更されたタイミングで端末の音量も変更することができます。
なお、音量を変更する際、今回は分かりやすいように端末側の音量変更の UI も表示するようにしていますが、設定で非表示にすることもできます。
このあたりはお好みで設定してください。

次に、端末側で音量が変更になったタイミングで、スライダーの方にそれを反映する処理を記述していきます。

componentDidMount() {
  this.getVolume();

  this.volumeListener = SystemSetting.addVolumeListener((data) => {
    const volume = data.value;
    this.setState({ volume: volume });
  })
}

componentWillUnmount() {
  SystemSetting.removeVolumeListener(this.volumeListener);
}

上で説明した通り、音量を取得する処理を componentDidMount() で呼び出していますが、それにプラスして SystemSetting.addVolumeListener() も追加します。
こちらを記述することで、端末側のボタン操作等で音量が変わった時、その値がスライダーに反映されます。

なお、.addVolumeListener() を使ったら、使わなくなったタイミングで必ず .removeVolumeListener() を実行するようにしてください。
私は、ページを離れる直前に呼び出される、componentWillUnmount() 内で実行するようにしています。

追加する処理は以上です！
上記を全て追加して実行したところ、スライダーの操作で端末の音量が変わり、端末側で音量を操作したらスライダーの値も無事に更新されました！

以上、React Native の「react-native-system-setting」ライブラリを使って、端末の音量をアプリから操作する方法についてでした。
ご参考になれば幸いです。