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

# Installation

> Add the FlowPilot Expo SDK and its peer dependencies to your React Native app.

Add FlowPilot to your Expo app with npm or yarn, install the Expo peer dependencies it builds on, and add the `react-native-reanimated` Babel plugin. The package is [`@flowpilotjs/react-native-sdk`](https://www.npmjs.com/package/@flowpilotjs/react-native-sdk), published publicly on npm.

## Requirements

**Requirements**

* Expo SDK 51+ (managed or bare workflow)
* React Native 0.74+
* React 18+
* TypeScript 5.4+ (optional, but recommended)

The SDK ships no native modules of its own. It is pure JS/TypeScript and relies on a set of Expo peer dependencies (`expo-image`, `expo-font`, `expo-haptics`, `expo-linear-gradient`, `expo-linking`, `expo-file-system`, `expo-secure-store`, `expo-store-review`, `react-native-reanimated`, `react-native-safe-area-context`, `react-native-svg`, `@react-native-community/slider`, `lottie-react-native`) that you install in your app.

## Steps

<Steps>
  <Step title="Install the SDK package">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @flowpilotjs/react-native-sdk
      ```

      ```bash yarn theme={null}
      yarn add @flowpilotjs/react-native-sdk
      ```
    </CodeGroup>
  </Step>

  <Step title="Install the peer dependencies">
    The SDK declares its Expo modules as peer dependencies, so you install them in your app. Use `npx expo install` (not plain `npm install`) so Expo picks versions that match your SDK version.

    ```bash theme={null}
    npx expo install \
      expo-file-system expo-font expo-haptics expo-image expo-linear-gradient expo-linking expo-secure-store expo-store-review \
      react-native-reanimated react-native-safe-area-context react-native-svg \
      @react-native-community/slider lottie-react-native
    ```

    <Note>
      The SDK lazy-loads several Expo modules (`expo-haptics`, `expo-linking`, `expo-font`, `expo-file-system`, `expo-secure-store`, `expo-image`, `expo-linear-gradient`, `expo-store-review`) with `require()` on first use, so a missing module degrades gracefully (for example, no haptics, or a flat fallback instead of a gradient background) instead of crashing at import. Install all of them anyway so every feature works.
    </Note>
  </Step>

  <Step title="Add the Reanimated Babel plugin">
    Animations and transitions use `react-native-reanimated`, which needs its Babel plugin. Expo SDK 51 sets this up for you in new projects; add it by hand if your `babel.config.js` does not already list it. It must be the **last** plugin.

    ```js babel.config.js theme={null}
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: ['babel-preset-expo'],
        plugins: ['react-native-reanimated/plugin'], // must be last
      };
    };
    ```
  </Step>

  <Step title="Rebuild and import">
    After adding the plugin, do a clean start so the change takes effect. Then import the SDK where you use it.

    ```bash theme={null}
    npx expo start --clear
    ```

    ```ts theme={null}
    import { FlowPilot } from '@flowpilotjs/react-native-sdk';
    ```
  </Step>
</Steps>

## Wrap your app in a safe-area provider

The renderer reads safe-area insets through `react-native-safe-area-context`. If your app is not already wrapped in a `SafeAreaProvider`, add one near the root so flows can lay out around the notch and home indicator.

```tsx theme={null}
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      {/* your app */}
    </SafeAreaProvider>
  );
}
```

## Notes

* **No native modules of its own.** The SDK is pure JS/TypeScript. It runs in the Expo managed workflow without any custom native code or config plugin. Its only native code comes from the peer dependencies, which are all standard Expo modules.
* **`flowpilot-export` is a build-time CLI, not part of your bundle.** The package also ships a Node executable (`flowpilot-export`) that snapshots a flow into an offline bundle. You run it with `npx flowpilot-export` on a dev machine or in CI; it is never imported by your app at runtime. See [Offline and bundled flows](/expo-sdk/offline-bundled-flows).

## Common mistakes

* **Using `npm install` for the peer dependencies.** Use `npx expo install` so the Expo module versions match your Expo SDK version. Mismatched native module versions are a common source of build errors.
* **Forgetting the Reanimated plugin.** Without `react-native-reanimated/plugin` in `babel.config.js` (as the last plugin), the app throws at startup. See Troubleshooting below.
* **Not doing a clean rebuild after adding the plugin.** Babel caches; run `npx expo start --clear` (or rebuild your dev client) so the plugin is applied.
* **No `SafeAreaProvider`.** Without one, `useSafeAreaInsets` returns zeros and flows can render under the status bar or home indicator.

## Troubleshooting

* **`[Reanimated] Couldn't determine the version of the native part...`** The Babel plugin is missing or the app was not rebuilt. Add `react-native-reanimated/plugin` as the last plugin in `babel.config.js` and run `npx expo start --clear` (or `npx expo prebuild` for a bare/dev-client workflow).
* **`Unable to resolve module expo-...`** A peer dependency is not installed. Re-run the `npx expo install ...` command above.
* **Type errors importing the SDK.** Confirm TypeScript 5.4+ and that `@flowpilotjs/react-native-sdk` resolved into `node_modules`.

## Related pages

* [Configuration](/expo-sdk/configuration)
* [Expo quickstart](/expo-sdk/quickstart)
* [Offline and bundled flows](/expo-sdk/offline-bundled-flows)
* [Expo SDK overview](/expo-sdk/index)
* [Troubleshooting](/expo-sdk/troubleshooting)