docs(rn): make OTP the auth example

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

@@ -182,3 +182,7 @@ npx expo prebuild --platform ios
 ```
 
 :::
+
+## Next steps
+
+Now setup the [signer](/react-native/signer/setup-guide)!

site/pages/react-native/overview.mdx

@@ -23,7 +23,7 @@ Whether you're using Expo or a bare React Native app, follow our guides to get s
 <div className="flex flex-row gap-4">
   <TileButton
     icon={<ExpoIcon width={24} height={24} />}
-    title="Expo"
+    title="Expo (recommended)"
     description="Get started with using Account Kit in your Expo project"
     href="/react-native/getting-started/getting-started-expo"
   />

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

@@ -13,6 +13,8 @@ Setting up the React Native Signer is similar to setting up the [React Signer](/
 
 <Snippet />
 
+## Dashboard Setup
+
 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
@@ -31,17 +33,38 @@ Setting up the React Native Signer is similar to setting up the [React Signer](/
     b. Enable authentication methods you want to support.
 
     <br />
-    <u>**Email auth**</u>
+    <u>**Email auth (OTP)**</u>
+    <br />
+    If you're using OTP Auth, toggle on email fill in the required fields. For **Redirect
+    URL**, you can just pass in the URL of your website (it doesn't get used during
+    OTP flows).
+    <br />
+    <u>**Email auth (Magic Link)**</u>
+    :::tip If you're only using OTP auth, you can skip to step 3! :::
+
+    - 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.
 
-    To use email auth, toggle on email.
+    - 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.
 
-    - 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`](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!
+    - 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`](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!
 
     <br />
     <img
@@ -76,7 +99,11 @@ Setting up the React Native Signer is similar to setting up the [React Signer](/
 
 ## Ensure Deep Linking is properly configured
 
-If you plan on using email or social auth, you'll need to ensure deep linking is properly configured in your app.
+:::tip
+If you're using OTP Auth, skip this step! We recommend starting with OTP flows as they are easier to set up.
+:::
+
+If you plan on using email maigc link auth or social auth, you'll need to ensure deep linking is properly configured in your app.
 
 Depending on if your app uses `expo-router`, `react-navigation`, or some other navigation library, you'll need to configure deep linking accordingly.
 

site/pages/react-native/using-smart-accounts/retry-user-operations.mdx

@@ -13,7 +13,7 @@ import Snippet from "../../../shared/infra/drop-and-replace-description.mdx";
 
 ```tsx twoslash [retry-user-operations.tsx]
 import React, { useState, useEffect } from "react";
-import { Alert } from "react-native";
+import { Alert, View, Button } from "react-native";
 import {
   createLightAccountClient,
   LightAccount,
@@ -85,9 +85,17 @@ export default function MyComponent() {
   };
 
   return (
-    <button onClick={handleSendUserOperation} disabled={isSendingUserOperation}>
-      {isSendingUserOperation ? "Sending..." : "Send Sponsored User Operation"}
-    </button>
+    <View>
+      <Button
+        onClick={handleSendUserOperation}
+        disabled={isSendingUserOperation}
+        title={
+          isSendingUserOperation
+            ? "Sending..."
+            : "Send Sponsored User Operation"
+        }
+      />
+    </View>
   );
 }
 ```

site/pages/react-native/using-smart-accounts/send-user-operations.mdx

@@ -23,7 +23,7 @@ or you can use `MultiOwnerLightAccount` if you want to support an account with m
 
 ```tsx twoslash [send-user-operation.tsx]
 import React, { useState, useEffect } from "react";
-import { Alert } from "react-native";
+import { Alert, View, Button } from "react-native";
 import { User } from "@account-kit/signer";
 import {
   createLightAccountClient,
@@ -81,14 +81,13 @@ export default function MyOpSenderComponent() {
   };
 
   return (
-    <div>
-      <button
-        onClick={handleSendUserOperation}
+    <View>
+      <Button
+        onPress={handleSendUserOperation}
         disabled={isSendingUserOperation}
-      >
-        {isSendingUserOperation ? "Sending..." : "Send UO"}
-      </button>
-    </div>
+        title={isSendingUserOperation ? "Sending..." : "Send UO"}
+      />
+    </View>
   );
 }
 ```
@@ -107,7 +106,7 @@ To send multiple user operations in a single call, simply pass an array of user
 
 ```tsx twoslash [batch-user-operation-component.tsx]
 import React, { useState, useEffect } from "react";
-import { Alert } from "react-native";
+import { Alert, View, Button } from "react-native";
 import { User } from "@account-kit/signer";
 import {
   createLightAccountClient,
@@ -174,14 +173,13 @@ export default function MyOpSenderComponent() {
   };
 
   return (
-    <div>
-      <button
+    <View>
+      <Button
         onClick={handleSendUserOperation}
         disabled={isSendingUserOperation}
-      >
-        {isSendingUserOperation ? "Sending..." : "Send User Operations"}
-      </button>
-    </div>
+        title={isSendingUserOperation ? "Sending..." : "Send UO"}
+      />
+    </View>
   );
 }
 ```

site/pages/react-native/using-smart-accounts/sponsor-gas.mdx

@@ -25,6 +25,7 @@ Now you can send a sponsored User Operation with the Policy ID.
 
 ```tsx twoslash [gas-sponsorship.tsx]
 import React, { useState, useEffect } from "react";
+import { View, Button } from "react-native";
 import {
   createLightAccountClient,
   LightAccount,
@@ -83,9 +84,17 @@ export default function MyComponent() {
   };
 
   return (
-    <button onClick={handleSendUserOperation} disabled={isSendingUserOperation}>
-      {isSendingUserOperation ? "Sending..." : "Send Sponsored User Operation"}
-    </button>
+    <View>
+      <Button
+        onClick={handleSendUserOperation}
+        disabled={isSendingUserOperation}
+        title={
+          isSendingUserOperation
+            ? "Sending..."
+            : "Send Sponsored User Operation"
+        }
+      />
+    </View>
   );
 }
 ```

site/shared/react-native/prerequisites.mdx

@@ -2,7 +2,8 @@
 
 - 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/).
+- [Hermes](https://reactnative.dev/docs/hermes) and [Fabric](https://reactnative.dev/architecture/fabric-renderer) must be enabled (if using expo these are on by default)
+- The Signer package requires you to be on React Native's [new architecture](https://reactnative.dev/architecture/landing-page#should-i-use-the-new-architecture-today). For information on how to enable it in your Expo project, check their [documentation](https://docs.expo.dev/guides/new-architecture/).
 - 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.
+  need to use a Development Build. Check the [Expo Development Builds documentation](https://docs.expo.dev/guides/local-app-development/)
+  for more information.