React Native(Expo)でバッテリーの状態を読み取る

React Native(Expo)でバッテリーの状態を読み取るには expo-battery を使います。

npx expo install expo-battery

Battery - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

バッテリーの状態を読み取る

まずはバッテリーの状態を読み取る方から

取得できるバッテリーの情報として

バッテリー残量 (batteryLevel)
バッテリーの状態（充電中とか）（batteryState）
低電力モード (lowPowerMode)

あります。

今回はこれらを一括で取得できる getPowerStateAsync を使ってみます。

公式ドキュメントから引用すると、 getPowerStateAsyncでは以下のような情報が返ってきます。

await Battery.getPowerStateAsync();
// {
//   batteryLevel: 0.759999,
//   batteryState: BatteryState.UNPLUGGED,
//   lowPowerMode: true,
// }

ちなみにそれぞれ個別に取得したければ

batteryLevel : getBatteryLevelAsync()
batteryState : getBatteryStateAsync()
lowPowerMode : isLowPowerModeEnabledAsync()

で可能です

getPowerStateAsyncで現在のバッテリー状況を確認できる簡単なアプリ？を書いてみました。

import { StyleSheet, Text, Button, View } from 'react-native';
import { getPowerStateAsync } from 'expo-battery';
import { useState } from 'react';

export default function App() {
  const [powerState, setPowerState] = useState({
    'batteryLevel':null, 'batteryState':null, 'lowPowerMode': null
  })

  return (
    <View style={styles.container}>
      <Text>バッテリー残量</Text>
      <Text>{powerState.batteryLevel}</Text>
      <Text>バッテリー状態</Text>
      <Text>
        {
          powerState.batteryState===null ? '' :
          powerState.batteryState===0 ? '不明' :
          powerState.batteryState===1 ? '通常' :
          powerState.batteryState===2 ? '充電中' :
          powerState.batteryState===3 ? '満タン' : 'エラー'
        }
      </Text>
      <Text>バッテリーモード</Text>
      <Text>
        {
          powerState.lowPowerMode===null ? '' :
          powerState.lowPowerMode ? '低電力モード' : '通常'
        }
      </Text>
      <Button
      title='バッテリー状態を取得'
      onPress={async ()=>{      
        setPowerState(await getPowerStateAsync())
      }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

詳しくは以下のドキュメントをご覧ください。

Battery - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

バッテリーの変化を検知する

読み取る時と同じようにバッテリー残量・バッテリーの状態・低電力モードの情報に対してイベントリスナーを設定することができます。

バッテリー残量 : addBatteryLevelListener(listener)
バッテリーの状態 : addBatteryStateListener(listener)
低電力モード : addLowPowerModeListener(listener)

ちなみに listener は実行する関数。

今回は低電力モードを検知するコードを書いてみる。

import { StyleSheet, Text, View, Alert } from 'react-native';
import { addLowPowerModeListener } from 'expo-battery';
import { useEffect } from 'react';

export default function App() {
  useEffect(()=>{
    const powerModeListener = addLowPowerModeListener(({lowPowerMode})=>{
      Alert.alert(
        '変化を検知！',
        lowPowerMode ? '低電力モードになりました' : '低電力モードが解除されました'
      )
    })

    return powerModeListener.remove
  }, [])

  return (
    <View style={styles.container}>
      <Text>変化を監視中！</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});