docs: update the docs sidebar to treat RN as a first class citizen

.eslintignore

@@ -14,3 +14,5 @@ account-kit/rn-signer/lib/*
 **/ios/generated/*
 **/build/*
 **/.cxx/*
+
+**/vendor/*

account-kit/rn-signer/package.json

@@ -25,7 +25,7 @@
     "ios",
     "cpp",
     "*.podspec",
-    "react-native.config.json",
+    "react-native.config.js",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -42,6 +42,7 @@
     "typecheck": "tsc",
     "build": "yarn typecheck",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "docs:gen": "node ../../doc-gen/dist/esm/cli.js generate --in ./src/index.ts --out ../../site/pages/reference/account-kit/react-native",
     "prepare": "bob build"
   },
   "keywords": [
@@ -90,10 +91,8 @@
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-config": "1.5.3",
-    "react-native-gesture-handler": "2.21.2",
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0",
     "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-mmkv": "^3.1.0"
   },

account-kit/rn-signer/src/client.ts

@@ -1,6 +1,7 @@
+import "./utils/buffer-polyfill.js";
+import "./utils/mmkv-localstorage-polyfill.js";
+
 /* eslint-disable import/extensions */
-import "./utils/mmkv-localstorage-polyfill";
-import "./utils/buffer-polyfill";
 import { type ConnectionConfig } from "@aa-sdk/core";
 import {
   BaseSignerClient,
@@ -16,11 +17,11 @@ import {
   type SignupResponse,
   type User,
 } from "@account-kit/signer";
-import NativeTEKStamper from "./NativeTEKStamper";
-import { z } from "zod";
 import { InAppBrowser } from "react-native-inappbrowser-reborn";
-import { parseSearchParams } from "./utils/parseUrlParams";
+import { z } from "zod";
 import { InAppBrowserUnavailableError } from "./errors";
+import NativeTEKStamper from "./NativeTEKStamper.js";
+import { parseSearchParams } from "./utils/parseUrlParams";
 
 export const RNSignerClientParamsSchema = z.object({
   connection: z.custom<ConnectionConfig>(),

account-kit/rn-signer/src/index.ts

@@ -0,0 +1,2 @@
+export type * from "./signer.js";
+export { RNAlchemySigner } from "./signer.js";

account-kit/rn-signer/src/signer.ts

@@ -1,10 +1,9 @@
-import { z } from "zod";
 import {
   BaseAlchemySigner,
   SessionManagerParamsSchema,
 } from "@account-kit/signer";
-// eslint-disable-next-line import/extensions
-import { RNSignerClient, RNSignerClientParamsSchema } from "./client";
+import { z } from "zod";
+import { RNSignerClient, RNSignerClientParamsSchema } from "./client.js";
 
 const RNAlchemySignerParamsSchema = z
   .object({
@@ -52,6 +51,29 @@ export class RNAlchemySignerSingleton extends BaseAlchemySigner<RNSignerClient>
   }
 }
 
+/**
+ * Factory function to create or retrieve a singleton instance of RNAlchemySigner.
+ *
+ * @example
+ * ```ts twoslash
+ * import { RNAlchemySigner } from "@account-kit/react-native-signer";
+ *
+ * const signer = RNAlchemySigner({
+ *  client: {
+ *    connection: {
+ *      apiKey: "YOUR_API_KEY"
+ *    },
+ *  },
+ *  // optional config to override default session manager configs
+ *  sessionConfig: {
+ *    expirationTimeMs: 1000 * 60 * 60 // 60 minutes
+ *  }
+ * });
+ * ```
+ *
+ * @param {RNAlchemySignerParams} params The parameters required to configure the RNAlchemySigner instance.
+ * @returns {RNAlchemySignerSingleton} The singleton instance of RNAlchemySigner configured with the provided parameters.
+ */
 export function RNAlchemySigner(params: RNAlchemySignerParams) {
   const instance = RNAlchemySignerSingleton.getInstance(params);
 

site/pages/index.mdx

@@ -11,6 +11,7 @@ import { DotsIcon } from "../components/icons/DotsIcon";
 import { InfraIcon } from "../components/icons/InfraIcon";
 import { SmartContractIcon } from "../components/icons/SmartContractIcon";
 import { SignerIcon } from "../components/icons/SignerIcon";
+import { ReactNativeIcon } from "../components/icons/ReactNativeIcon";
 
 # Get started with Account Kit
 
@@ -49,6 +50,12 @@ Account Kit is also published as a set of lower level packages that can be used
 utlimate control over your application.
 
 <div className="grid grid-cols-2 gap-8">
+  <SmallTileRow
+    icon={<ReactNativeIcon height={20} width={20} />}
+    title="React Native"
+    description="Mobile apps with React Native"
+    href="/react-native/overview"
+  />
   <SmallTileRow
     icon={<DotsIcon />}
     title="Other JS Frameworks"

site/pages/infra/drop-and-replace.mdx

@@ -3,32 +3,11 @@ title: Drop and Replace
 description: Learn how to use Drop and Replace to retry failing user operations.
 ---
 
-# Drop and replace failing user operations
-
-In the previous guides, we learned how to send user operations with gas sponsorship, but what happens when a user operation fails to mine? In this guide,
-we'll cover how to use drop and replace to resend failing user operations and ensure they get mined.
-
-## What is drop and replace?
-
-If fees change and your user operation gets stuck in the mempool, you can use drop and replace to resend the user operation with higher fees. This is most useful
-when used in combination with [`waitForUserOperationTransaction`](/reference/aa-sdk/core/functions/waitForUserOperationTransaction) to ensure the transaction is mined
-and then resend the user operation with higher fees if waiting times out.
-
-Drop and replace works by resubmitting a user operation with the greater of:
+import Snippet from "../../shared/infra/drop-and-replace-description.mdx";
 
-1. 10% higher fees
-2. The current minimum fees
-
-We export a `dropAndReplace` function from `@aa-sdk/core` that you can use to handle this flow for you and is automatically added to the Smart Account Client.
-
-## How to drop and replace effectively
-
-Let's run through an example that uses drop and replace if waiting for a user operation to mine times out.
+# Drop and replace failing user operations
 
-:::warning
-If sponsoring gas, like in the example below, each call to `sendUserOperation` and `dropAndReplace` will generate pending gas sponsorships in your dashboard. This can result in you hitting your gas manager limit.
-At the moment, pending sponsorships expire after 10 minutes of inactivity, but it is possible that retrying excessively can temporarily exhaust your sponsorship limits.
-:::
+<Snippet />
 
 :::code-group
 

site/pages/react-native/getting-started/getting-started-expo.mdx

@@ -3,15 +3,23 @@ title: Getting started with Account Kit on Expo
 description: A guide on integrating Account Kit within a React Native Expo application
 ---
 
-:::warning
-To use Account Kit in your React Native application, ensure you are on React Native version 0.76 or higher.
-:::
+import Snippet from "../../../shared/react-native/prerequisites.mdx";
 
-## Getting Started on an Expo project
+# Getting Started on an Expo project
 
 We would go through the steps to get your environment setup for using Account Kit within a React Native application on Expo.
 
-### Upgrade to the latest version of Expo
+<Snippet />
+
+## Create a new Expo project
+
+If you don't have an Expo project setup, you can create one using the following command:
+
+```bash
+npx create-expo-app@latest
+```
+
+## Upgrade to the latest version of Expo
 
 The first thing we need to do is make sure we're on the latest version of Expo (SDK 52 or later). The reason for this is that we need React Native version 0.76 or higher because it has `TextEncoder` natively supported.
 
@@ -35,11 +43,11 @@ Then you want to upgrade all dependencies to match the new Expo SDK version.
 npx expo install --fix
 ```
 
-### Set up shims
+## Set up shims
 
 Once we've got our Expo project setup and running, we need to setup a few shims so we can use crypto libraries in React Native.
 
-#### Install shim dependencies
+### Install shim dependencies
 
 :::code-group
 
@@ -53,7 +61,7 @@ yarn add node-libs-react-native crypto-browserify stream-browserify react-native
 
 :::
 
-#### Register shim modules in Metro
+### Register shim modules in Metro
 
 Create or edit your `metro.config.js` file in the root of your project so that it includes the following:
 
@@ -76,88 +84,105 @@ config.resolver.extraNodeModules = {
 module.exports = config;
 ```
 
-#### Register global shims
+### Register global shims
 
-Import the following packages at the top of your `App.tsx` file so that libraries that depend on globals like `crypto` have access to them.
+Import the following packages at the topmost entry point of your app so that libraries that depend on globals like `crypto` have access to them.
 
-:::tip
-If you're using bare React Native, you would add the above imports to your `index.js` file.
-:::
+If you are using `expo-router`, add the imports in your topmost `_layout.tsx` file in the `app` directory. However if you are using a different navigation library (e.g. `react-navigation`),
+add the imports in your topmost `App.tsx` file.
 
-```tsx [App.tsx]
+```tsx [App.tsx or app/_layout.tsx]
 import "node-libs-react-native/globals.js";
 import "react-native-get-random-values";
 
 // rest of App.tsx
 ```
 
-### Install Account Kit
+## Install Account Kit
 
 That's it! Now you can install the packages you want from Account Kit and start building your React Native Account Abstraction app.
 
 :::code-group
 
 ```bash [npm]
-npm install -s @account-kit/smart-contracts @account-kit/infra
+npm install -s @account-kit/smart-contracts @account-kit/infra @account-kit/react-native-signer
 ```
 
 ```bash [yarn]
-yarn add @account-kit/smart-contracts @account-kit/infra
+yarn add @account-kit/smart-contracts @account-kit/infra @account-kit/react-native-signer
 ```
 
 :::
 
-### Install the React Native Signer Package
-
-:::warning
-CAUTION: The React Native Signer package is currently in Alpha and is only supported on Android.
-:::
+:::tip
+The react-native-signer package is an ESM module. As such, you might have to add the following to your `tsconfig.json`'s `compilerOptions`:
 
-#### Prerequisites
+```json
+"module": "NodeNext",
+"moduleResolution": "nodenext",
+```
 
-There are a few things to note before using the Signer package in your Expo project:
+:::
 
-- The Signer package is incompatible with Expo Go and as a result, you'd need to use a Development Build. Check the [Expo Development Builds documentation](https://docs.expo.dev/develop/development-builds/introduction/) for more information.
-- The Signer package requires you to be on React Native's new architecture. For information on how to enable it in your Expo project, check their [documentation](https://docs.expo.dev/guides/new-architecture/).
+### Add supporting dependencies
 
-Once the prerequisites are met, you can install the Signer package using the following command:
+To ensure the Signer package works correctly, you'll need to add the following dependencies to your project:
 
 :::code-group
 
 ```bash [npm]
-npm install @account-kit/react-native-signer
+npm install @account-kit/signer react-native-mmkv zustand abitype react-native-inappbrowser-reborn
 ```
 
 ```bash [yarn]
-yarn add @account-kit/react-native-signer
+yarn add @account-kit/signer react-native-mmkv zustand abitype react-native-inappbrowser-reborn
 ```
 
 :::
 
-#### Add supporting dependencies
+## Set iOS minimum deployment target
 
-To ensure the Signer package works correctly, you'll need to add the following dependencies to your project:
-
-:::code-group
+Since we require a minimum deployment target of iOS 17, you will need to instruct Expo to set this during pre-build. First, install `expo-build-properties` via:
 
-```bash [npm]
-npm install @account-kit/signer react-native-mmkv zustand abitype
+```bash
+npx expo install expo-build-properties
 ```
 
-```bash [yarn]
-yarn add @account-kit/signer react-native-mmkv zustand abitype
+Then add the plugin to your `app.json`:
+
+```json
+// app.json
+{
+  "expo": {
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "deploymentTarget": "17.0"
+          }
+        }
+      ]
+    ]
+  }
+}
 ```
 
-:::
-
-### Run a Prebuild!
+## Run a Prebuild!
 
 Now that we've got everything setup, we can run a prebuild to ensure the native modules are properly built and added to your project.
+:::code-group
 
-```bash
+```bash [android]
 npx expo prebuild --platform android
 ```
 
-:::tip
-Remember to run the prebuild command with the `--platform android` flag to ensure the native modules are built for Android.
+```bash [ios]
+npx expo prebuild --platform ios
+```
+
 :::
+
+## Next steps
+
+Now setup the [signer](/react-native/signer/setup-guide)!