# Installation

Detour provides a React Native SDK (`@swmansion/react-native-detour`) compatible with Expo and bare React Native projects.

Before installation, make sure your app is created in the Detour Dashboard and you have:

- `appID` from **API configuration**
- publishable `apiKey` from **API configuration**
- platform integration snippets from **App configuration**

## Install package

```bash
    npm install @swmansion/react-native-detour
    ```
  ```bash
    yarn add @swmansion/react-native-detour
    ```
  ```bash
    pnpm add @swmansion/react-native-detour
    ```
  ```bash
    bun add @swmansion/react-native-detour
    ```
  ## Install peer dependencies (Expo projects)

For Expo projects (including prebuild), install peer dependencies with Expo CLI so versions are matched to your Expo SDK:

```bash
npx expo install expo-application expo-clipboard expo-constants expo-device expo-localization @react-native-async-storage/async-storage
```

## Bare React Native projects

If you are not using Expo CLI, install peer dependencies with your package manager and pin versions compatible with your React Native/Expo Modules setup.

```bash
    npm install expo-application expo-clipboard expo-constants expo-device expo-localization @react-native-async-storage/async-storage
    ```
  ```bash
    yarn add expo-application expo-clipboard expo-constants expo-device expo-localization @react-native-async-storage/async-storage
    ```
  ```bash
    pnpm add expo-application expo-clipboard expo-constants expo-device expo-localization @react-native-async-storage/async-storage
    ```
  ```bash
    bun add expo-application expo-clipboard expo-constants expo-device expo-localization @react-native-async-storage/async-storage
    ```
  :::note[Device info provider]
`expo-device` is a required peer dependency. Unlike storage, the device info source is not configurable. The SDK imports it directly to read the device model, manufacturer, and OS version for the deferred-link fingerprint. There is no adapter to plug in, and `react-native-device-info` is not accepted as an alternative until `2.3.0`.
:::

:::note[Custom storage]
`@react-native-async-storage/async-storage` is optional if you provide a custom storage adapter in config. See [Custom Storage](https://detour.swmansion.com/docs/sdk/react-native/custom-storage).
:::

### Expo Modules setup (React Native CLI)

The peer dependencies above (`expo-application`, `expo-clipboard`, `expo-constants`, `expo-localization`) are [Expo Modules](https://docs.expo.dev/bare/installing-expo-modules/), and they ship native code that has to be autolinked into your `android/` and `ios/` projects. In an Expo project this happens automatically. In a bare React Native CLI project you add Expo Modules once:

```bash
npx install-expo-modules@latest
```

This sets up Expo Modules autolinking (and on iOS raises the deployment target to the Expo Modules minimum).

`install-expo-modules` also switches the native JS bundling step to Expo CLI (`export:embed`), which requires `metro.config.js` to extend `expo/metro-config` (a superset of `@react-native/metro-config`, safe in bare projects). The tool usually migrates this for you. Verify it, especially if you had a customized `metro.config.js`:

```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { mergeConfig } = require("@react-native/metro-config");

module.exports = mergeConfig(getDefaultConfig(__dirname), {});
```

Then align the Expo package versions to your setup:

```bash
npx expo install --fix
```

:::tip[Build errors after adding Expo Modules]
If the app throws at startup or a release build fails after adding Expo Modules, see [bare React Native CLI build issues](https://detour.swmansion.com/docs/sdk/react-native/2.1.x/testing#bare-react-native-cli-build-issues).
:::

## Credentials in app config

```ts
import { type Config } from '@swmansion/react-native-detour';

export const detourConfig: Config = {
  apiKey: process.env.EXPO_PUBLIC_DETOUR_API_KEY!,
  appID: process.env.EXPO_PUBLIC_DETOUR_APP_ID!,
  shouldUseClipboard: true,
};
```

Keep `apiKey` and `appID` in environment variables or another secure configuration layer.

## Next steps

1. Implement the provider and link handling in [Usage](https://detour.swmansion.com/docs/sdk/react-native/sdk-usage).
2. Pick a runnable app pattern in [Examples](https://detour.swmansion.com/docs/sdk/react-native/examples).
3. If upgrading existing code, follow [Migration to v2](https://detour.swmansion.com/docs/sdk/react-native/migration-2-0-0) and start from [From 0.x](https://detour.swmansion.com/docs/sdk/react-native/migration-2-0-0#from-0x) or [From 1.0.1](https://detour.swmansion.com/docs/sdk/react-native/migration-2-0-0#from-101).