App integration

Expo Router discovers routes from your app's filesystem, so add one small adapter at app/snapbot.tsx:

import { SnapbotRoute, type SnapbotConfiguration } from "react-native-snapbot";
import { useCallback } from "react";

export default function SnapbotScreen() {
  const configure = useCallback(
    async ({ appearance, backupCode }: SnapbotConfiguration) => {
      if (appearance) await saveThemePreference(appearance);
      if (backupCode) await restoreScreenshotAccount(backupCode);
      return true;
    },
    [],
  );

  return (
    <SnapbotRoute
      apiEnvironment={process.env.EXPO_PUBLIC_API_ENV ?? "development"}
      configure={configure}
    />
  );
}

The setup route reads these query parameters:

• apiEnvironment: must match the environment compiled into the app;
• appearance: light, dark, or system;
• backupCode: an optional opaque value passed to your configure callback.

Implement your app’s setup in the callback. Return true or void when the app is ready for navigation, return false to intentionally keep the setup screen pending, or throw to render a static error. Pass configurationError and isAuthenticating when setup state comes from an asynchronous app hook.

The route checks __DEV__ before rendering setup. It is not an authentication boundary; never include the route in a production workflow or give a backup code more privilege than your debug build requires.

Wait for app setupCopy Anchor Link

configure receives an optional appearance (light, dark, or system) and backupCode (an empty string when none is passed). The helpers in the example are placeholders for your app's existing theme and account functions. Prefer awaiting those operations inside the callback before returning.

apiEnvironment is required and describes the environment compiled into the app. A requested nonempty environment that does not match renders an error without calling configure. Snapbot supplies EXPO_PUBLIC_API_ENV, EXPO_PUBLIC_SNAPBOT=1, RCT_METRO_PORT, and CI=1 to its Expo/build processes. Changing environment between screenshots causes the CLI to rebuild and relaunch.

configurationError displays an app-owned error. isAuthenticating changes the pending status text; it does not block a successful callback. Returning false keeps setup pending, and changing that prop alone does not rerun the callback. The callback runs for a new combination of environment, appearance, and code.

The CLI opens setup before every screenshot variant. A code is passed on the first use of an environment/code combination and may then be reused without sending it again. With no code, saved simulator credentials may remain active. Make session expectations explicit in your app's setup implementation.

Exported components and typesCopy Anchor Link

Use SnapbotRoute for the Expo Router adapter. SnapbotSetup is the underlying setup UI and accepts requestedApiEnvironment, requestedAppearance, and backupCode parameters directly; prefer the route wrapper for its production redirect. Both accept apiEnvironment, configure, configurationError, and isAuthenticating as described above.

The package exports SnapbotRouteProps, SnapbotSetupProps, SnapbotConfiguration, SnapbotAppearance, and SnapbotParameter, along with the state hook. The exported TypeScript source is authoritative for the API.

A ready or error setup screen is deliberately static. The CLI checks whether the image has stopped changing. It does not read the setup result or verify that login succeeded. Review the captured UI and app diagnostics.