Skip to main content
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, 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-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

1

Install the SDK package

npm install @flowpilotjs/react-native-sdk
2

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.
npx expo install \
  expo-file-system expo-font expo-haptics expo-image 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
The SDK lazy-loads the Expo modules (expo-haptics, expo-linking, expo-font, expo-file-system, expo-secure-store, expo-image) with require() on first use, so a missing module degrades gracefully (for example, no haptics) instead of crashing at import. Install all of them anyway so every feature works.
3

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.
babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], // must be last
  };
};
4

Rebuild and import

After adding the plugin, do a clean start so the change takes effect. Then import the SDK where you use it.
npx expo start --clear

import { FlowPilot } from '@flowpilotjs/react-native-sdk';

​
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. 
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.

​
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.