Subchapter 5.3

Setup

references/setup.mdMarkdown12 KBView on GitHub

Set up EAS Observe in an existing project

EAS Observe collects app-startup performance metrics (cold launch, warm launch, bundle load, TTR, TTI) from production Expo apps. This reference summarizes the steps to add expo-observe to an existing project.

Source: — consult this page for the latest guidance.

Setup · Eas Observe · expo/skills · Skills Docs

Concern	SDK 55	SDK 56 and later
Root layout HOC	`AppMetricsRoot.wrap(...)`	`ObserveRoot.wrap(...)`
`markInteractive()` API	Global: `AppMetrics.markInteractive()`	Hook: `const { markInteractive } = useObserve()`
Import source	`expo-observe`	`expo-observe` (same package)

// app/_layout.tsx
import { Stack } from 'expo-router';
import { AppMetricsRoot } from 'expo-observe';

function RootLayout() {
  return <Stack />;
}

export default AppMetricsRoot.wrap(RootLayout);

// app/_layout.tsx
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { AppMetrics, AppMetricsRoot } from 'expo-observe';
import { useEffect, useState } from 'react';

SplashScreen.preventAutoHideAsync();

function RootLayout() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        await authenticateUser();
        await fetchInitialData();
      } catch (e) {
        console.warn(e);
      } finally {
        setIsReady(true);
      }
    }
    prepare();
  }, []);

  useEffect(() => {
    if (isReady) {
      SplashScreen.hide();
      AppMetrics.markInteractive();
    }
  }, [isReady]);

  if (!isReady) return null;
  return <Stack />;
}

export default AppMetricsRoot.wrap(RootLayout);

// app/_layout.tsx
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { ObserveRoot, useObserve } from 'expo-observe';
import { useEffect, useState } from 'react';

SplashScreen.preventAutoHideAsync();

function RootLayout() {
  const [isReady, setIsReady] = useState(false);
  const { markInteractive } = useObserve();

  useEffect(() => {
    async function prepare() {
      try {
        await authenticateUser();
        await fetchInitialData();
      } catch (e) {
        console.warn(e);
      } finally {
        setIsReady(true);
      }
    }
    prepare();
  }, []);

  useEffect(() => {
    if (isReady) {
      SplashScreen.hide();
      markInteractive();
    }
  }, [isReady, markInteractive]);

  if (!isReady) return null;
  return <Stack />;
}

export default ObserveRoot.wrap(RootLayout);

Enable the integration at module scope, before any screen mounts (it cannot be toggled at runtime — calling configure() after mount throws):
```
// app/_layout.tsx
import { Observe } from 'expo-observe';

Observe.configure({
  integrations: { 'expo-router': true },
});
```

Call useObserve() inside each screen to get a markInteractive scoped to the current route, and call it from a useEffect once the screen is interactive:

import { useObserve } from 'expo-observe';
import { useEffect } from 'react';

export default function Home() {
  const { markInteractive } = useObserve();
  useEffect(() => {
    markInteractive();
  }, [markInteractive]);
  return (/* screen content */);
}

Enable the integration at module scope, before mount:

// App.tsx
import { Observe } from 'expo-observe';

Observe.configure({
  integrations: { 'react-navigation': true },
});

Replace the top-level <NavigationContainer> with <ObserveNavigationContainer> — a drop-in replacement that accepts the same props and forwards the same ref. If you pass a linking config it is used to resolve a human-readable screen path; otherwise the metric falls back to route.name.
```
import { ObserveNavigationContainer } from 'expo-observe/integrations/react-navigation';

export default function App() {
  return <ObserveNavigationContainer>{/* navigators */}</ObserveNavigationContainer>;
}
```

Parameter	Type	Required	Notes
`name`	`string`	yes	Stable, dot-separated identifier, e.g. `'report.exported'`.
`options.attributes`	`Record<string, string \| number \| boolean \| array \| nested object>`	no	Structured context attached to the event.
`options.body`	`string`	no	Free-form message complementing the structured attributes.
`options.severity`	`'trace' \| 'debug' \| 'info' \| 'warn' \| 'error' \| 'fatal'`	no	Defaults to `'info'`.

Observe.logEvent('cache.evicted', {
  body: 'Cache evicted because disk pressure exceeded the configured threshold.',
  severity: 'warn',
  attributes: { evictedItemCount: 42, freedBytes: 1048576 },
});

Setup

Set up EAS Observe in an existing project

Setup

Set up EAS Observe in an existing project

SDK 55 vs SDK 56+ at a glance

Prerequisites

Step 1 — Install the library

Step 2 — Wrap the root layout

Step 3 — Mark the app as interactive

Multiple entry screens

Step 4 — Build the app

Step 5 — View the metrics

Optional — per-route navigation metrics (SDK 56+)

Expo Router

React Navigation

Optional — user-defined events (SDK 56+)

Parameters

Naming and privacy

Dispatch

Viewing events

Quick checklist