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

# SocketFi React Native SDK: Installation and Config

> Install @socketfi/react-native, add Expo browser and linking dependencies, configure your app scheme, and initialize the SocketFi client.

Setting up the SocketFi React Native SDK involves installing three packages, registering a URL scheme in your Expo config, and creating a shared client instance. The process takes about ten minutes on a fresh Expo project.

## Install the SDK

<CodeGroup>
  ```bash npm theme={null}
  npm install @socketfi/react-native
  ```

  ```bash yarn theme={null}
  yarn add @socketfi/react-native
  ```

  ```bash pnpm theme={null}
  pnpm add @socketfi/react-native
  ```
</CodeGroup>

## Install Expo dependencies

The SDK uses `expo-web-browser` to open hosted authentication and approval screens, and `expo-linking` to handle the deep link that brings users back to your app after they complete the flow. Install both with the Expo CLI so they are pinned to a version compatible with your Expo SDK:

```bash theme={null}
npx expo install expo-web-browser expo-linking
```

<Note>
  Always use `npx expo install` rather than plain `npm install` for Expo packages. This ensures the installed version is compatible with your current Expo SDK version and avoids hard-to-debug runtime errors.
</Note>

## Configure your app scheme

SocketFi needs a custom URL scheme to redirect users back to your app after authentication. Add the `scheme` field to `app.json`:

```json app.json theme={null}
{
  "expo": {
    "name": "Acme Pay",
    "slug": "acme-pay",
    "scheme": "acmepay"
  }
}
```

Choose a scheme that is unique to your app (e.g. `acmepay`, `myfinanceapp`). After the user authenticates, SocketFi will redirect them to:

```
acmepay://socketfi/auth/success
```

<Warning>
  The `scheme` field is required. Without it, users will complete authentication in the browser and have no way to return to your app. See the [Deep Linking guide](/sdk/react-native/deep-linking) for full configuration details.
</Warning>

## Set up environment variables

Store your Client ID in an environment variable using Expo's config system. Add it to a `.env` file at the root of your project:

```bash .env theme={null}
EXPO_PUBLIC_SOCKETFI_CLIENT_ID=your_client_id_here
```

Access it in your code with:

```typescript theme={null}
process.env.EXPO_PUBLIC_SOCKETFI_CLIENT_ID
```

<Warning>
  Do not commit your `.env` file to source control. Add it to your `.gitignore`. Your Client ID ties requests to your registered SocketFi application.
</Warning>

## Initialize the SocketFi client

Create a shared instance in a dedicated file and import it wherever you need it. Avoid constructing multiple instances across different components.

```typescript lib/socketfi.ts theme={null}
import { SocketFi } from "@socketfi/react-native";

export const socketfi = new SocketFi({
  clientId: process.env.EXPO_PUBLIC_SOCKETFI_CLIENT_ID!,
  network: "TESTNET",
});
```

### Full configuration example

```typescript lib/socketfi.ts theme={null}
import { SocketFi } from "@socketfi/react-native";

export const socketfi = new SocketFi({
  clientId: process.env.EXPO_PUBLIC_SOCKETFI_CLIENT_ID!,
  network: "TESTNET",

  brand: {
    appName: "Acme Pay",
    primaryColor: "#4F46E5",
  },

  onSuccess(session) {
    console.log("SocketFi session:", session);
  },

  onError(error) {
    console.error("SocketFi error:", error);
  },
});
```

The React Native SDK accepts exactly the same constructor options as the React SDK. Refer to the [React installation guide](/sdk/react/installation) for the full `ParamField` reference.

## Minimal working example

Once the client is initialized, you can trigger authentication from a button:

```typescript App.tsx theme={null}
import { View, Button } from "react-native";
import { socketfi } from "./lib/socketfi";

export default function App() {
  async function handleLogin() {
    try {
      const session = await socketfi.authenticate();
      console.log("Signed in:", session.userProfile.id);
    } catch (error) {
      console.error("Login failed:", error);
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Button title="Continue with SocketFi" onPress={handleLogin} />
    </View>
  );
}
```

<Note>
  HTTPS is not required during React Native development — Expo's dev server and the Metro bundler run over HTTP locally and this is fine. However, all SocketFi API calls made from production builds must go over HTTPS. Configure your production environment accordingly before submitting to app stores.
</Note>

## Next steps

With the SDK installed and initialized, configure deep linking so SocketFi can return users to your app after authentication:

<CardGroup cols={1}>
  <Card title="Configure Deep Linking" icon="arrow-right" href="/sdk/react-native/deep-linking">
    Set up expo-linking event listeners and handle the SocketFi redirect URLs.
  </Card>
</CardGroup>