@react-native-webapis/web-storage


🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

$3

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

Web Storage API
for React Native.

Installation

``sh
yarn add @rnx-kit/polyfills --dev
yarn add @react-native-webapis/web-storage
`

or if you're using npm

`sh
npm add --save-dev @rnx-kit/polyfills
npm add @react-native-webapis/web-storage
`

Usage

`diff
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..b068909a 100644
--- a/packages/test-app/src/App.native.tsx
+++ b/packages/test-app/src/App.native.tsx
@@ -1,3 +1,4 @@
+// @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 +8,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 +187,14 @@ function App({ concurrentRoot }: { concurrentRoot?: boolean }) {
[setFabric]
);

+ const [localValue, setLocalValue] = useState("Pending");
+ useEffect(() => {
+ const key = "sample/local-storage";
+ window.localStorage.setItem(key, "Success");
+ setLocalValue(window.localStorage.getItem(key) ?? "Failed");
+ return () => window.localStorage.removeItem(key);
+ }, []);
+
return (


@@ -195,6 +204,9 @@ function App({ concurrentRoot }: { concurrentRoot?: boolean }) {
style={styles.body}
>