feat(rn): Add Expo Router auto instrumentation guide (#9501)

Co-authored-by: vivianyentran <[email protected]>

Author: krystofwoldrich

docs/platforms/react-native/manual-setup/expo.mdx

@@ -100,6 +100,7 @@ To verify that everything is working as expected, build the `Release` version of
 ## Next Steps
 
 - [Learn how to upload source maps for native builds and Expo Updates](/platforms/react-native/sourcemaps/uploading/expo/)
+- [Add automatic performance monitoring with Expo Router](/platforms/react-native/performance/instrumentation/expo-router/)
 
 ## Notes
 

docs/platforms/react-native/performance/instrumentation/automatic-instrumentation.mdx

@@ -31,6 +31,7 @@ We currently provide three routing instrumentations out of the box to instrument
 - [React Navigation](/platforms/react-native/performance/instrumentation/react-navigation/)
 - [React Navigation V4 and prior](/platforms/react-native/performance/instrumentation/react-navigation-v4/)
 - [React Native Navigation](/platforms/react-native/performance/instrumentation/react-native-navigation/)
+- [Expo Router](/platforms/react-native/performance/instrumentation/expo-router/)
 - [Custom Instrumentation](/platforms/react-native/performance/instrumentation/custom-navigation/), implement automatic navigation instrumentation for a custom library.
 
 If you have a custom routing instrumentation or use a routing library we don't yet support, you can use the [bare bones routing instrumentation](#bare-bones) or [create your own](#custom-instrumentation) by extending it.

docs/platforms/react-native/performance/instrumentation/expo-router.mdx

@@ -0,0 +1,69 @@
+---
+title: Expo Router
+description: "Learn how to use Sentry's Expo Router instrumentation."
+sidebar_order: 65
+---
+
+Sentry's React Native SDK package ships with instrumentation for Expo Router. This allows you to see the performance of your navigation transitions and the errors that occur during them. This page will guide you through setting up the instrumentation and configuring it to your needs.
+
+## Initialization
+
+The code snippet below shows how to initialize the instrumentation.
+
+```javascript { filename: 'app/_layout.tsx' }
+import React from 'react';
+import { Slot, useNavigationContainerRef } from 'expo-router';
+import Constants from 'expo-constants';
+import * as Sentry from '@sentry/react-native';
+
+const routingInstrumentation = new Sentry.ReactNavigationInstrumentation({
+  enableTimeToInitialDisplay: Constants.appOwnership !== 'expo', // Only in native builds, not in Expo Go.
+});
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [
+    new Sentry.ReactNativeTracing({
+      routingInstrumentation,
+      enableNativeFramesTracking: Constants.appOwnership !== 'expo', // Only in native builds, not in Expo Go.
+    }),
+  ],
+});
+
+function RootLayout() {
+  const ref = useNavigationContainerRef();
+
+  React.useEffect(() => {
+    if (ref) {
+      routingInstrumentation.registerNavigationContainer(ref);
+    }
+  }, [ref]);
+
+  return <Slot />;
+}
+
+export default Sentry.wrap(RootLayout);
+```
+
+## Options
+
+You can configure the instrumentation by passing an options object to the constructor:
+
+```javascript
+new Sentry.ReactNavigationInstrumentation({
+  enableTimeToInitialDisplay: true, // default: false
+  routeChangeTimeoutMs: 1000, // default: 1000
+});
+```
+
+### routeChangeTimeoutMs
+
+This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is 1000ms.
+
+### enableTimeToInitialDisplay
+
+This option will enable automatic measuring of the time to initial display for each route. To learn more see [Time to Initial Display](/platforms/react-native/performance/instrumentation/time-to-display).
+
+## Notes
+
+- Slow and Frozen frames, Time To Initial Display and Time To Full Display are only available in native builds, not in Expo Go.