> ## Documentation Index
> Fetch the complete documentation index at: https://docs.phantom.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

> Step-by-step guide to integrating Phantom Connect in a React Native mobile application.

Complete guide to integrating Phantom Connect in a React Native app.

## 1. Install dependencies

```bash theme={null}
npm install @phantom/react-native-sdk @solana/web3.js

# Required polyfill for cryptographic operations
npm install react-native-get-random-values

# Install peer dependencies
npx expo install expo-secure-store expo-web-browser expo-auth-session react-native-svg
```

<Info>
  If you're using Expo, use `npx expo install` to ensure compatibility. For bare React Native projects, you can install the packages directly with npm.
</Info>

## 2. Configure app scheme

Add your custom scheme to `app.json`:

```json theme={null}
{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "scheme": "myapp",
    "plugins": [
      "expo-router",
      "expo-secure-store",
      "expo-web-browser",
      "expo-auth-session"
    ]
  }
}
```

<Info>
  For bare React Native projects, configure deep linking in your native project files. See [React Native deep linking documentation](https://reactnative.dev/docs/linking) for details.
</Info>

## 3. Create the app entry point

The polyfill must be the first import:

<Warning>
  The `react-native-get-random-values` import must be the very first import in your app's entry point, before any other imports.
</Warning>

### With Expo Router

```tsx theme={null}
// app/_layout.tsx
import "react-native-get-random-values"; // Must be first!

import { Stack } from "expo-router";
import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";

export default function Layout() {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple"],
        appId: "your-app-id", // Get from phantom.com/portal
        scheme: "myapp",
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "myapp://phantom-auth-callback",
        },
      }}
      theme={darkTheme}
      appName="My App"
    >
      <Stack />
    </PhantomProvider>
  );
}
```

### Without Expo Router

```tsx theme={null}
// App.tsx or index.js
import "react-native-get-random-values"; // Must be first!

import React from "react";
import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";
import { WalletScreen } from "./WalletScreen";

export default function App() {
  return (
    <PhantomProvider
      config={{
        providers: ["google", "apple"],
        appId: "your-app-id", // Get from phantom.com/portal
        scheme: "myapp",
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "myapp://phantom-auth-callback",
        },
      }}
      theme={darkTheme}
      appName="My App"
    >
      <WalletScreen />
    </PhantomProvider>
  );
}
```

## 4. Create the wallet screen

```tsx theme={null}
// WalletScreen.tsx
import React from "react";
import { View, Text, Button, StyleSheet, Alert } from "react-native";
import {
  useModal,
  usePhantom,
  useAccounts,
  useDisconnect,
  useSolana,
} from "@phantom/react-native-sdk";

export function WalletScreen() {
  const { open } = useModal();
  const { isConnected } = usePhantom();
  const addresses = useAccounts();
  const { disconnect } = useDisconnect();
  const { solana } = useSolana();

  if (isConnected && addresses) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Wallet Connected</Text>
        <Text style={styles.address}>{addresses[0]?.address}</Text>
        <Button
          title="Sign Message"
          onPress={async () => {
            try {
              const { signature } = await solana.signMessage("Hello!");
              Alert.alert("Success", `Signature: ${signature.slice(0, 10)}...`);
            } catch (error) {
              Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign");
            }
          }}
        />
        <Button
          title="Disconnect"
          onPress={() => disconnect()}
        />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome</Text>
      <Button title="Connect Wallet" onPress={open} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
    fontWeight: "bold",
  },
  address: {
    fontSize: 14,
    marginBottom: 20,
    color: "#666",
  },
});
```

## 5. Configure Phantom Portal

1. Go to [phantom.com/portal](https://phantom.com/portal)
2. Create or select your app
3. Add your redirect URL (e.g., `myapp://phantom-auth-callback`) to redirect URLs
4. Copy your App ID