feat(webapis): introduce @react-native-webapis/battery-status

[tido64]

Description

Initial implementation of Battery Status API for Android, iOS, macOS, and Windows.

Requires #2580.

Test plan

Apply the following changes to the test app:

diff --git a/packages/test-app/babel.config.js b/packages/test-app/babel.config.js
index 69ebd557..a012b7f5 100644
--- a/packages/test-app/babel.config.js
+++ b/packages/test-app/babel.config.js
@@ -13,6 +13,7 @@ module.exports = {
           { runtime: "automatic" },
         ],
         [require("@babel/plugin-transform-react-jsx-source")],
+        [require("@rnx-kit/polyfills")],
       ],
     },
   ],
diff --git a/packages/test-app/src/App.native.tsx b/packages/test-app/src/App.native.tsx
index 599634a9..a9b493ab 100644
--- a/packages/test-app/src/App.native.tsx
+++ b/packages/test-app/src/App.native.tsx
@@ -1,3 +1,5 @@
+// @react-native-webapis
+
 import { acquireTokenWithScopes } from "@rnx-kit/react-native-auth";
 // Both `internal` imports are used to verify that `metro-resolver-symlinks`
 // resolves them correctly when `experimental_retryResolvingFromDisk` is
@@ -7,7 +9,7 @@ import {
   getRemoteDebuggingAvailability,
 } from "internal";
 import { getHermesVersion } from "internal/hermes";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import {
   NativeModules,
@@ -186,6 +188,14 @@ function App({ concurrentRoot }: { concurrentRoot?: boolean }) {
     [setFabric]
   );

+  const [batteryLevel, setBatteryLevel] = useState(-1);
+  useEffect(() => {
+    // @ts-expect-error Battery Status API is deprecated
+    navigator.getBattery().then((status) => {
+      setBatteryLevel(status.level);
+    });
+  }, []);
+
   return (
     <SafeAreaView style={styles.body}>
       <StatusBar barStyle={isDarkMode ? "light-content" : "dark-content"} />
@@ -195,6 +205,9 @@ function App({ concurrentRoot }: { concurrentRoot?: boolean }) {
         style={styles.body}
       >
         <Header />
+        <View style={styles.group}>
+          <Feature value={batteryLevel.toFixed(2)}>Battery Level</Feature>
+        </View>
         <View style={styles.group}>
           <Button onPress={startAcquireToken}>Acquire Token</Button>
         </View>

Build and run:

cd packages/test-app
yarn add @rnx-kit/polyfills --dev
yarn add @react-native-webapis/battery-status
yarn build --dependencies

# Android
yarn bundle:android
yarn android

# iOS
yarn bundle:ios
pod install --project-directory=ios
yarn ios

Note: When running in the iOS simulator, the battery level will always be '-1'.

Screenshots

Android	iOS	macOS	Windows

[matthargett]

is fast refresh something that can be tested by the e2e tester in CI, to capture the problem fixed in the polyfill?

[tido64]

is fast refresh something that can be tested by the e2e tester in CI, to capture the problem fixed in the polyfill?

I've added tests, but it doesn't look like we're capable of capturing this specific error. We currently don't have e2e tests running on a device (emulator or otherwise). I'm not sure how one would trigger fast refresh outside of running the code. If you have any pointers, I'd really appreciate it.

[kelset]

overall it all looks great. This PR showcases already some learnings and standards/patterns that we should codify back into the RFC, I'll take care of that.

Thanks for all the work 🙇‍♂️