docs(rn): add callouts for expo tsconfig and deployment targets (#1304)

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

@@ -3,23 +3,25 @@ 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.
 
-### Create a new Expo project
+<Snippet />- 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/guides/local-app-development/)
+for more information.
+
+## 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
+## 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.
 
@@ -43,11 +45,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
 
@@ -61,7 +63,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:
 
@@ -84,7 +86,7 @@ config.resolver.extraNodeModules = {
 module.exports = config;
 ```
 
-#### Register global shims
+### Register global shims
 
 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.
 
@@ -98,73 +100,87 @@ 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 react-native-inappbrowser-reborn
+```bash
+npx expo install expo-build-properties
 ```
 
-```bash [yarn]
-yarn add @account-kit/signer react-native-mmkv zustand abitype react-native-inappbrowser-reborn
+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
+```
+
 :::

site/pages/react-native/getting-started/getting-started-rn-bare.mdx

@@ -3,29 +3,23 @@ title: Getting started with Account Kit on bare React Native
 description: A guide on integrating Account Kit within a Bare React Native 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";
 
 :::info
 This guide assumes you already have a Bare React Native app and want to integrate Account Kit. If you are starting a project from scratch, we recommend following the [Expo guide](/react-native/getting-started/getting-started-expo) instead.
 :::
 
-## Getting Started on a Bare React Native project
+# Getting Started on a Bare React Native project
 
 We would go through the steps to get your environment setup for using Account Kit within a Bare React Native application.
 
-### Prerequisites
-
-To use Account Kit in your React Native project, ensure your project is setup with React Native version 0.76 or higher.
-
-Please follow the [React Native Upgrade Guide](https://reactnative.dev/docs/upgrading) if you need to upgrade your project.
+<Snippet />
 
-### Set up shims
+## Set up shims
 
 Once we've got our React Native 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
 
@@ -39,7 +33,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:
 
@@ -64,7 +58,7 @@ const config = {
 module.exports = mergeConfig(defaultConfig, config);
 ```
 
-#### Register global shims
+### Register global shims
 
 Import the following packages at the top of your `index.js` file so that libraries that depend on globals like `crypto` have access to them.
 
@@ -75,47 +69,23 @@ import "react-native-get-random-values";
 // rest of index.js
 ```
 
-### Install Account Kit and build!
+## Install Account Kit and build!
 
 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
-```
-
-```bash [yarn]
-yarn add @account-kit/smart-contracts @account-kit/infra
-```
-
-:::
-
-### Install the React Native Signer Package
-
-:::warning
-CAUTION: The React Native Signer package is currently in Alpha and is only supported on Android.
-:::
-
-:::info
-The Signer package requires you to be on React Native's new architecture. For information on how to enable it in your project, check the [documentation](https://reactnative.dev/architecture/landing-page).
-:::
-
-#### Install the Signer package
-
-:::code-group
-
-```bash [npm]
-npm install @account-kit/react-native-signer
+npm install -s @account-kit/smart-contracts @account-kit/infra @account-kit/react-native-signer
 ```
 
 ```bash [yarn]
-yarn add @account-kit/react-native-signer
+yarn add @account-kit/smart-contracts @account-kit/infra @account-kit/react-native-signer
 ```
 
 :::
 
-#### Add supporting dependencies
+### Add supporting dependencies
 
 To ensure the Signer package works correctly, you'll need to add the following dependencies to your project:
 
@@ -131,7 +101,7 @@ yarn add @account-kit/signer react-native-mmkv zustand abitype react-native-inap
 
 :::
 
-### Build and run your project
+## Build and run your project
 
 Now that we've got everything setup, we can build our project!
 

site/pages/react-native/signer/overview.mdx

@@ -3,19 +3,17 @@ title: Using a Signer in React Native
 description: Setup the React Native Signer Package in your React Native Project
 ---
 
-:::warning
-**CAUTION:** The Alchemy Signer is currently in Alpha and only supported on Android devices.
-:::
+import Snippet from "../../../shared/react-native/prerequisites.mdx";
 
 For more information on what a Signer is, refer to the [concepts](/concepts/smart-account-signer) page.
 
 # React Native Signer Overview
 
 The React Native Signer allows you to use a Signer in your React Native application. It is built on top of the [Web Signer SDK](/signer/what-is-a-signer).
 
-:::info
-The React Native Signer package is only supported on React Native's new architecture, and requires your project to be on React Native version 0.76 or newer.
-:::
+<Snippet />
+
+## Next Steps
 
 Check out the [Expo Installation](/react-native/getting-started/getting-started-expo#install-the-react-native-signer-package) guide to get started on Expo.
 

site/pages/react-native/signer/setup-guide.mdx

@@ -3,20 +3,16 @@ title: Using a Signer in React Native
 description: Setup the React Native Signer Package in your React Native Project
 ---
 
-:::warning
-**CAUTION:** The Alchemy Signer is currently in Alpha.
-:::
+import Snippet from "../../../shared/react-native/prerequisites.mdx";
 
 For more information on what a Signer is, refer to the [concepts](/concepts/smart-account-signer) page.
 
 # React Native Signer setup guide
 
-:::info
-The React Native Signer package is only supported on React Native's new architecture, and requires your project to be on React Native version 0.76 or newer.
-:::
-
 Setting up the React Native Signer is similar to setting up the [React Signer](/signer/quickstart) with a few extra steps.
 
+<Snippet />
+
 1.  Get your **API key** by creating a new app in your [Alchemy Dashboard](https://dashboard.alchemy.com/apps)
     :::warning
     Make sure **Ethereum** is enabled for your app under the Networks tab
@@ -42,7 +38,7 @@ Setting up the React Native Signer is similar to setting up the [React Signer](/
     - To use email auth in your React Native app, your app needs to be set up to handle deep links that can be served via http or https.
     - In production scenarios, you would want to set up [Android App Links](https://developer.android.com/training/app-links) on android or [Universal Links](https://developer.apple.com/documentation/xcode/supporting-universal-links-in-your-app) on iOS to gracefully handle deep links.
     - For testing, simply setting up a simple server on [http://localhost:3000](http://localhost:3000/) or any other server you control which redirects an incoming request to your app scheme is the easiest way to get started.
-      a sample implementation of this can be found the `example` folder of the `React Native Signer` repo.
+      a sample implementation of this can be found the [`example`](https://github.com/alchemyplatform/aa-sdk/blob/main/examples/react-native-expo-example/redirect-server/index.ts) folder of the `React Native Signer` repo.
     - The http or https url you set up in the previous step would need to be added as the **Redirect URL** in the Account Kit Dashboard.
     - This is the url that the user will be redirected to if you use the magic link email flow to log in your users.
     - Optionally stylize ✨ the email with your brand color and logo!

site/shared/react-native/prerequisites.mdx

@@ -0,0 +1,5 @@
+## Pre-requisites
+
+- React Native version 0.76 or later
+- iOS Minumum Deployment Target: 17.0
+- 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/).