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

# React Native

<Warning>
  Because of how **React Native** libraries work, you will need to install
  dependencies that have native code directly in your app so that we can use
  them.
</Warning>

You can add support for Sophon Account in your React Native application by using the `@sophon-labs/account-react-native` package.

## Installation

<Tip>
  The SDK is compatible with Expo Go without the need of prebuilding the app.
</Tip>

Before you start, you need these libraries:

<CodeGroup>
  ```sh npm theme={null}
  # Expo packages
  npx expo install react-native-webview expo-standard-web-crypto expo-crypto expo-network expo-secure-store
  ```

  ```sh yarn theme={null}
  # Expo packages
  npx expo install react-native-webview expo-standard-web-crypto expo-crypto expo-network expo-secure-store
  ```

  ```sh pnpm theme={null}
  # Expo packages
  npx expo install react-native-webview expo-standard-web-crypto expo-crypto expo-network expo-secure-store
  ```
</CodeGroup>

After that, you are ready to install our SDK:

<CodeGroup>
  ```sh npm theme={null}
  # Sophon Library
  npm install @sophon-labs/account-react-native
  ```

  ```sh yarn theme={null}
  # Sophon Library
  yarn add @sophon-labs/account-react-native
  ```

  ```sh pnpm theme={null}
  # Sophon Library
  pnpm add @sophon-labs/account-react-native
  ```
</CodeGroup>

## Usage

Before anything, you need to wrap your application with `SophonContextProvider`, that will store context information about the account and walletClient connection.

```ts theme={null}
import { DataScopes } from "@sophon-labs/account-core";
import { SophonContextProvider } from "@sophon-labs/account-react-native";

export default function RootLayout() {
  // ...

  return (
    <SophonContextProvider
      partnerId="$YOUR_PARTNER_ID"
      dataScopes={[DataScopes.email, DataScopes.x]}
      network="testnet"
    >
      {/* Your components*/}
    </SophonContextProvider>
  );
}
```

With that ready, you can now use our hooks to interact with Sophon.

```ts theme={null}
import { useSophonAccount } from "@sophon-labs/account-react-native";

export default function YourComponent() {
  const { connect, account, disconnect } = useSophonAccount();
  // ...
}
```

<Card title="React Native Example" icon="github" href="https://github.com/sophon-org/sophon-account-sso/tree/main/examples/mobile/expo-53-go" arrow="true" cta="Read more">
  You can check an example of implementing React Native with Sophon Account.
</Card>