Source: https://docs.expo.dev/router/reference/screen-tracking

Hide navigation

Search

Ctrl K

Home Guides EAS Reference Learn

Archive Expo Snack Discord and Forums Newsletter

Screen tracking for analytics

Edit page

Copy page

Learn how to enable screen tracking for analytic when using Expo Router.

Edit page

Copy page

---

Unlike React Navigation, Expo Router always has access to a URL. This means screen tracking is as easy as the web.

1. Create a higher-order component that observes the currently selected URL
2. Track the URL in your analytics provider

app

 _layout.tsx

app/_layout.tsx

Copy

import { useEffect } from 'react'; import { usePathname, useGlobalSearchParams, Slot } from 'expo-router'; export default function Layout() { const pathname = usePathname(); const params = useGlobalSearchParams(); // Track the location in your analytics provider here. useEffect(() => { analytics.track({ pathname, params }); }, [pathname, params]); // Export all the children routes in the most basic way. return <Slot />; }

Now when the user changes routes, the analytics provider will be notified.

Migrating from React Navigation

---

React Navigation's screen tracking guide cannot make the same assumptions about the navigation state that Expo Router can. As a result, the implementation requires the use of onReady and onStateChange callbacks. Avoid using these methods if possible as the root <NavigationContainer /> is not directly exposed and allows cascading in Expo Router.