Set up EAS Observe

Install the library

Make sure you are using the latest version of expo, then install expo-observe:

Wrap your root layout

Wrap your root layout with AppMetricsRoot (SDK 55) or ObserveRoot (SDK 56 and later). This higher-order component (HOC) automatically measures Time to First Render (TTR) for you.

import { Stack } from 'expo-router';
import { ObserveRoot } from 'expo-observe';

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

export default ObserveRoot.wrap(RootLayout);

import { Stack } from 'expo-router';
import { AppMetricsRoot } from 'expo-observe';

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

export default AppMetricsRoot.wrap(RootLayout);

Mark interactive

Call markInteractive() when your app is fully ready for user interaction. This should be called after any initialization work behind the splash screen completes, such as:

• Checking for updates
• Authenticating the user
• Fetching initial data
• Animating the splash screen

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

// Keep the splash screen visible while we fetch resources
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);

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

// Keep the splash screen visible while we fetch resources
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);

markInteractive() can safely be called multiple times per session, but only the first call records the measurement. If your app has multiple entry screens (for example, an onboarding flow, login flow, or deep link targets), call markInteractive on every one of these screens. If you only place it on one screen, Time to Interactive (TTI) will not be recorded when the app opens via a deep link to a different screen.

Create a new build

After installing expo-observe and adding the instrumentation, create a new build of your app:

By default, metrics collected from debug builds are not dispatched. To test your integration in a debug build, see Enable metrics in development.

View your metrics

Open your project and open Observe tab in EAS dashboard to view metrics from your app.

For details on filtering, release comparison, and session investigation, see the Dashboard guide.

You can also query metrics from the terminal using the EAS CLI:

• eas observe:versions: Lists app versions along with their build IDs, update group IDs, and release dates. Useful for finding the version identifiers needed to filter the other commands.
• eas observe:metrics-summary: Shows aggregated performance metric statistics (such as median, p75, and p95 values) grouped by app version. Use this to compare overall startup performance across releases.
• eas observe:metrics: Shows individual performance metric events ordered by value, including session and device metadata. Use this to investigate specific slow sessions or outliers.
• eas observe:events: Shows individual events emitted by your app via Observe.logEvent. See User-defined events for details.

Run any of these commands with --help to see the available flags and arguments.