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,
// }
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',
},
});

詳しいことは下のイベントリスナーについてのドキュメントをご覧ください。

Battery - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
コメント