React Navigation V4

Learn how to use Sentry's React Navigation Legacy instrumentation.

Sentry's React Native SDK package ships with instrumentation for React Navigation V4 and older. 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.

The code snippet below shows how to initialize the instrumentation.

Copied
// Construct a new instrumentation instance. This is needed to communicate between the integration and React
const routingInstrumentation = new Sentry.ReactNavigationV4Instrumentation();

Sentry.init({
  ...
  integrations: [
    new Sentry.ReactNativeTracing({
      // Pass instrumentation to be used as `routingInstrumentation`
      routingInstrumentation,
      ...
    }),
  ],
})

// Functional Component Example
const App = () => {
  // Create a ref for the navigation container
  const appContainer = React.useRef();

  // Register the navigation container with the instrumentation
  React.useEffect(() => {
    routingInstrumentation.registerAppContainer(appContainer);
  }, []);

  return (
    // Connect the ref to the navigation container
    <AppContainer ref={appContainer} />
  );
};

You can configure the instrumentation by passing an options object to the constructor:

Copied
new Sentry.ReactNavigationV4Instrumentation({
  routeChangeTimeoutMs: 1000, // default: 1000
});

This option specifies how long the instrumentation will wait for the initial route to mount after a change has been initiated before the transaction is discarded. The default value is 1000ms.

  • This instrumentation supports React Navigation version 4 and older. If you use React Navigation version 5 and newer, see the instrumentation for React Navigation.

  • The instrumentation creates a transaction on every route change including goBack navigations.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").