Set up Expo 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. This higher-order component (HOC) automatically measures Time to First Render (TTR) for you.

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 { 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);

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

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

function App() {
  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.hideAsync();
      AppMetrics.markInteractive();
    }
  }, [isReady]);

  if (!isReady) {
    return null;
  }

  // your app
}

export default AppMetricsRoot.wrap(App);

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 are not dispatched when NODE_ENV=development. To test your integration during development, 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: Shows aggregated performance metrics (such as median, p75, and p95 values) grouped by app version. Use this to compare overall startup performance across releases.
• eas observe:events: Shows individual performance events ordered by metric value, including session and device metadata. Use this to investigate specific slow sessions or outliers.

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