From a129185f70ffc411ba5b9ffd32d094ed658899b7 Mon Sep 17 00:00:00 2001 From: Iyk Azorji Date: Tue, 28 Jan 2025 17:33:14 -0500 Subject: [PATCH] feat: add updated bare and expo rn guides (#1303) * feat: add updated bare and expo rn guides * feat: update bare info callout to default to expo * fix: fix docs linting * fix: fix typo --- .../getting-started/getting-started-expo.mdx | 9 ++++----- .../getting-started/getting-started-rn-bare.mdx | 4 ++++ site/pages/react-native/overview.mdx | 7 ++++--- site/sidebar/reference/account-kit/react.ts | 4 ++++ 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/site/pages/react-native/getting-started/getting-started-expo.mdx b/site/pages/react-native/getting-started/getting-started-expo.mdx index 144658b418..389d1b05b4 100644 --- a/site/pages/react-native/getting-started/getting-started-expo.mdx +++ b/site/pages/react-native/getting-started/getting-started-expo.mdx @@ -86,13 +86,12 @@ module.exports = config; #### 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"; diff --git a/site/pages/react-native/getting-started/getting-started-rn-bare.mdx b/site/pages/react-native/getting-started/getting-started-rn-bare.mdx index ed13b37a7e..9adb1e7f4f 100644 --- a/site/pages/react-native/getting-started/getting-started-rn-bare.mdx +++ b/site/pages/react-native/getting-started/getting-started-rn-bare.mdx @@ -7,6 +7,10 @@ description: A guide on integrating Account Kit within a Bare React Native appli To use Account Kit in your React Native application, ensure you are on React Native version 0.76 or higher. ::: +:::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 We would go through the steps to get your environment setup for using Account Kit within a Bare React Native application. diff --git a/site/pages/react-native/overview.mdx b/site/pages/react-native/overview.mdx index 1c5991d96d..d72e68fae8 100644 --- a/site/pages/react-native/overview.mdx +++ b/site/pages/react-native/overview.mdx @@ -9,12 +9,13 @@ import { TileButton } from "../../components/TileButton"; # Using within React Native applications -We've built a simple example using expo [here](https://github.com/alchemyplatform/aa-sdk/tree/main/examples/react-native-expo-example). This guide assumes you're using Expo, but the same principles should apply to a bare React Native app as well. +We've built a simple example for reference purposes [here](https://github.com/alchemyplatform/aa-sdk/tree/main/examples/react-native-expo-example). This was built using Expo, but the same principles should apply to a bare React Native app as well. ## Getting Started -:::tip -If you're starting fresh, we recommend using Expo as it makes getting started significantly easier. +:::info +If you are starting a fresh project, we highly recommend using Expo. You can easily create a new Expo project by running `npx create-expo-app@latest` from your terminal. +Visit the [Expo docs](https://docs.expo.dev/get-started/create-a-project/) for more information. ::: Whether you're using Expo or a bare React Native app, follow our guides to get started with using Account Kit in your project. diff --git a/site/sidebar/reference/account-kit/react.ts b/site/sidebar/reference/account-kit/react.ts index fb94a8144f..852b8b5560 100644 --- a/site/sidebar/reference/account-kit/react.ts +++ b/site/sidebar/reference/account-kit/react.ts @@ -43,6 +43,10 @@ export const accountKitReactReferenceSidebar: SidebarItem[] = [ text: "useAlchemyAccountContext", link: "/reference/account-kit/react/hooks/useAlchemyAccountContext", }, + { + text: "useAuthContext", + link: "/reference/account-kit/react/hooks/useAuthContext", + }, { text: "useAuthError", link: "/reference/account-kit/react/hooks/useAuthError",