feat(expo): add an Expo config plugin to simplify enabling Next Storage on Android

Fixes #750

Co-Authored-By: Bill Spooner <[email protected]>

Author: hassankhan

.changeset/shaggy-eggs-grin.md

@@ -0,0 +1,5 @@
+---
+"@react-native-async-storage/expo-plugin": minor
+---
+
+Add an Expo config plugin to simplify enabling Next Storage on Android

package.json

@@ -45,6 +45,7 @@
   "workspaces": [
     "packages/api",
     "packages/default-storage",
+    "packages/default-storage-expo-plugin",
     "packages/eslint-config",
     "packages/sqlite-storage",
     "packages/website"

packages/default-storage-expo-plugin/.eslintrc.js

@@ -0,0 +1,2 @@
+// @generated by expo-module-scripts
+module.exports = require('expo-module-scripts/eslintrc.base.js');

packages/default-storage-expo-plugin/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require("./build");

packages/default-storage-expo-plugin/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@react-native-async-storage/expo-plugin",
+  "version": "1.0.0",
+  "description": "Asynchronous, persistent, key-value storage system for React Native.",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "files": [
+    "build/",
+    "src/",
+    "app.plugin.js"
+  ],
+  "author": "Two Doors Dev <[email protected]>",
+  "contributors": [
+    "Hassan Khan <[email protected]> (https://github.com/hassankhan)",
+    "Bill Spooner <[email protected]> (https://github.com/sandyklark)"
+  ],
+  "homepage": "https://github.com/react-native-async-storage/async-storage#readme",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "react native",
+    "async storage",
+    "asyncstorage",
+    "storage",
+    "expo",
+    "expo config plugin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-async-storage/async-storage.git",
+    "directory": "packages/default-storage-expo-plugin"
+  },
+  "scripts": {
+    "prepack": "yarn build",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "build": "CI=true expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test:ts": "yarn build --noEmit",
+    "test:lint": "yarn lint"
+  },
+  "devDependencies": {
+    "@expo/config-plugins": "^8.0.8",
+    "eslint": "^8.56.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "expo-module-scripts": "^3.5.2",
+    "prettier": "^3.3.3"
+  },
+  "peerDependencies": {
+    "expo": "^51"
+  },
+  "upstreamPackage": "@react-native-async-storage/async-storage"
+}

packages/default-storage-expo-plugin/src/android/withNextStorage.ts

@@ -0,0 +1,24 @@
+import { ConfigPlugin, withGradleProperties } from "@expo/config-plugins";
+
+import { AsyncStorageOptions } from "../types";
+
+export const withNextStorage: ConfigPlugin<AsyncStorageOptions> = (
+  config,
+  props
+) => {
+  const useNextStorage = props?.android?.nextStorage?.enabled ?? false;
+
+  if (!useNextStorage) {
+    return config;
+  }
+
+  return withGradleProperties(config, (config) => {
+    config.modResults.push({
+      key: "AsyncStorage_useNextStorage",
+      value: "true",
+      type: "property",
+    });
+
+    return config;
+  });
+};

packages/default-storage-expo-plugin/src/index.ts

@@ -0,0 +1,20 @@
+import type { ConfigPlugin } from "@expo/config-plugins";
+
+import { withNextStorage } from "./android/withNextStorage";
+import { AsyncStorageOptions } from "./types";
+
+const DEFAULT_OPTS: AsyncStorageOptions = {
+  android: {
+    nextStorage: {
+      enabled: false,
+    },
+  },
+};
+
+const withAsyncStorage: ConfigPlugin<AsyncStorageOptions> = (config, props) => {
+  const normalizedProps = { ...DEFAULT_OPTS, ...props };
+  config = withNextStorage(config, normalizedProps);
+  return config;
+};
+
+export default withAsyncStorage;

packages/default-storage-expo-plugin/src/types.ts

@@ -0,0 +1,7 @@
+export type AsyncStorageOptions = {
+  android: {
+    nextStorage?: {
+      enabled: boolean;
+    };
+  };
+};

packages/default-storage-expo-plugin/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "expo-module-scripts/tsconfig.plugin",
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "src"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}

packages/website/docs/advanced/Next.md

@@ -102,6 +102,51 @@ If you want to use different KSP version, you can set a property in `gradle.prop
 AsyncStorage_next_kspVersion=1.9.24-1.0.20
 ```
 
+### Configuration with Expo
+
+If you are using Expo, you can configure the feature using [config plugins](https://docs.expo.dev/guides/config-plugins/).
+
+First, install the required plugins:
+
+```bash
+expo install expo-build-properties @react-native-async-storage/expo-plugin
+```
+
+Next, in your Expo project's `app.json`, add the plugins:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "kotlinVersion": "1.9.23"
+          }
+        }
+      ],
+      [
+        "@react-native-async-storage/expo-plugin",
+        {
+          "android": {
+            "nextStorage": {
+              "enabled": true
+            }
+          }
+        }
+      ]
+    ]
+  }
+}
+```
+
+Finally, use the Expo prebuild command to re-generate the Android project:
+
+```bash
+expo prebuild --platform android --clean
+```
+
 ### Notable changes
 
 Alongside of a warning regarding `key`/`value`, errors are thrown when: