> ## Documentation Index > Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt > Use this file to discover all available pages before exploring further. # React Native Quickstart (JS SDK) Use the JavaScript SDK inside a React Native app (Expo or bare). State is wired via the `@dynamic-labs-sdk/react-hooks` package: the same headless client and hooks as on web, plus native polyfills and deep links. > [!WARNING] > > The JavaScript SDK is headless; there is no built-in modal, wallet picker, or > login form. You build all UI yourself. See > [Building UI](https://docs.dynamic.xyz/docs/javascript/building-ui/overview.md) for details. > [!NOTE] > > Before you start: a React Native app (Expo development build or bare) and a Dynamic environment ID from the [Dynamic Console](https://console.dynamic.xyz). Expo Go is not supported. > [tab] Agent-friendly > > > [!TIP] > > > > Add the Dynamic docs MCP to your AI editor first — your agent can then query the docs directly. > > > [tab] Cursor > > > > [Click here to add the MCP to Cursor.](https://cursor.com/en/install-mcp?name=dynamic\&config=eyJ1cmwiOiJodHRwczovL3d3dy5keW5hbWljLnh5ei9kb2NzL21jcCJ9) > > > [tab] Claude Code > > > > ```bash theme={"system"} > > claude mcp add --transport http dynamic https://www.dynamic.xyz/docs/mcp > > ``` > > > [tab] Codex > > > > ```bash theme={"system"} > > codex mcp add dynamic --url https://www.dynamic.xyz/docs/mcp > > ``` > > > [tab] Other > > > > If your editor or agent supports remote HTTP MCP, add a server that points at `https://www.dynamic.xyz/docs/mcp`. The exact steps depend on the product; use its MCP documentation for URL-based or HTTP transport setup. > > Copy this prompt into your LLM (e.g. Claude, ChatGPT, Cursor) to implement Dynamic in your React Native app via the JS SDK. > > ````markdown theme={"system"} > # React Native Quickstart (JS SDK) > > ## Default for React Native apps > > **This is the recommended quickstart for React Native.** Use this document, not the Legacy React Native SDK quickstart (`/react-native/reference/quickstart`, agent prompt id: `react-native`), when integrating Dynamic into a new or existing React Native app unless the user already uses `@dynamic-labs/legacy-client` + `ReactNativeExtension` or explicitly requests the legacy SDK. > > ## Purpose and Usage > > This document provides structured quickstart information for using the Dynamic JavaScript SDK inside a React Native app (Expo or bare). It is designed to be consumed by LLMs to generate accurate installation commands and code examples based on user requirements. > > Key facts: > - Same headless `@dynamic-labs-sdk/client` as web > - State flows through `@dynamic-labs-sdk/react-hooks` (same as React web) > - React Native adds polyfills, native modules, and deep-link metadata only > - Do **not** install `@dynamic-labs/legacy-client` or `@dynamic-labs/legacy-react-native-extension` (legacy) > > **How to use this document:** > > Start by asking the user which path they want: > > > "Would you like a **Quick start** (Expo + email login + EVM + embedded wallet, zero configuration, recommended if you're just getting started) or a **Custom setup** (choose Expo vs bare, chains, auth method, and wallet type)?" > > - If the user chooses **Quick start**: follow the Quick Start Path section exactly. Do not ask any configuration questions; execute the happy path as written. > - If the user chooses **Custom setup**: follow the Custom Setup Path section and ask all configuration questions before proceeding. > > --- > > ## Quick Start Path > > > Use this path when the user chooses Quick start. Execute every step in order. Do not skip steps. Do not ask configuration questions. > > **Stack:** Expo (development build) + npm + EVM only + email OTP + embedded WaaS wallet + `@dynamic-labs-sdk/react-hooks` > > ### Step 1: Prerequisites > > Tell the user: > - Node.js 18+ is required > - An Expo app is required (e.g. `npx create-expo-app@latest`) > - **Expo Go is not supported**: the SDK needs native modules linked via a development build or EAS Build > - A Dynamic environment ID is required; get one at https://console.dynamic.xyz/dashboard/developer/api > > Ask the user for their environment ID before proceeding. > > ### Step 2: Install > > ``` > npx expo install @dynamic-labs-sdk/client @dynamic-labs-sdk/evm @dynamic-labs-sdk/react-hooks @tanstack/react-query @react-native-async-storage/async-storage react-native-keychain expo-linking expo-crypto buffer viem > ``` > > `@tanstack/react-query` and `viem` are required peer dependencies of `@dynamic-labs-sdk/react-hooks` and `@dynamic-labs-sdk/evm`, respectively. > > ### Step 3: Create polyfills > > Create `polyfills.ts` at the project root: > > ```typescript > import { Buffer } from 'buffer'; > import { getRandomValues, randomUUID } from 'expo-crypto'; > > if (!global.crypto) { > // @ts-expect-error — partial Crypto implementation > global.crypto = {}; > } > if (!global.crypto.getRandomValues) { > global.crypto.getRandomValues = getRandomValues; > } > if (!global.crypto.randomUUID) { > global.crypto.randomUUID = randomUUID; > } > > global.Buffer = Buffer; > > type MinimalLocation = { origin: string }; > > const globalWithLocation = globalThis as typeof globalThis & { > location?: MinimalLocation; > }; > > // The embedded wallet client reads window.location.origin; use metadata.universalLink > if (!globalWithLocation.location) { > // @ts-expect-error — partial Location implementation > globalWithLocation.location = { origin: 'https://example.com' }; > } > ``` > > ### Step 4: Load polyfills first > > Create `index.ts` at the project root and point `package.json` `"main"` at it: > > ```typescript > // Polyfills must run before any other import > import './polyfills'; > import 'expo-router/entry'; > ``` > > ```json > { > "main": "./index.ts" > } > ``` > > If the app does not use Expo Router, import `./polyfills` as the first line of the existing entry file instead. > > ### Step 5: Create the Dynamic client module > > Create `src/dynamicClient.ts` (or project-root `dynamicClient.ts`). Importing this file at app root registers extensions before any component renders. > > ```typescript > import { createDynamicClient, initializeClient } from "@dynamic-labs-sdk/client"; > import { addEvmExtension } from "@dynamic-labs-sdk/evm"; > > export const dynamicClient = createDynamicClient({ > autoInitialize: false, > environmentId: "YOUR_ENVIRONMENT_ID", > metadata: { > name: "My App", > // Deep link scheme registered in the native app (Info.plist / AndroidManifest / app.json) > nativeLink: "myapp://", > // App origin — required for passkeys; use your real HTTPS origin in production > universalLink: "https://example.com", > }, > }); > > // Register extensions immediately, before initialization completes. > // The client argument is optional: omit it unless you run multiple clients. > addEvmExtension(); > > void initializeClient(); > ``` > > ### Step 6: Wrap the app in `QueryClientProvider` and `DynamicProvider` > > At the root layout (e.g. `app/_layout.tsx` for Expo Router), import the client module and wrap the tree. Mount `QueryClientProvider` outside `DynamicProvider`: > > ```tsx > import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; > import { DynamicProvider } from "@dynamic-labs-sdk/react-hooks"; > import { dynamicClient } from "./dynamicClient"; > > const queryClient = new QueryClient(); > > export default function RootLayout({ children }: { children: React.ReactNode }) { > return ( > > > {children} > > > ); > } > ``` > > ### Step 7: Email OTP login component > > Build a minimal login form. The JS SDK is headless; there is no built-in modal. > > ```tsx > import { useState } from "react"; > import { View, TextInput, Button } from "react-native"; > import { useSendEmailOTP, useVerifyOTP } from "@dynamic-labs-sdk/react-hooks"; > > export function Login() { > const [email, setEmail] = useState(""); > const [code, setCode] = useState(""); > > const { mutate: sendEmailOTP, data: otpVerification } = useSendEmailOTP(); > const { mutate: verifyOTP } = useVerifyOTP(); > > if (!otpVerification) { > return ( > > >