# React Navigation | Sentry for React Native

Sentry's React Native SDK package ships with instrumentation for React Navigation. 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](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/react-navigation.md#initialization)

The code snippet below shows how to initialize the instrumentation.

```jsx
import * as Sentry from "@sentry/react-native";
import { NavigationContainer, createNavigationContainerRef } from "@react-navigation/native";

const navigationIntegration = Sentry.reactNavigationIntegration({

  enableTimeToInitialDisplay: true,

});

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  integrations: [navigationIntegration],
})

function App = () => {
  const containerRef = createNavigationContainerRef();

  return (
    <NavigationContainer
      ref={containerRef}
      onReady={() => {

        navigationIntegration.registerNavigationContainer(containerRef);

      }}>
    </NavigationContainer>
  );
};
```

## [Options](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/react-navigation.md#options)

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

```javascript
Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true, // default: false
  routeChangeTimeoutMs: 1_000, // default: 1_000
  ignoreEmptyBackNavigationTransactions: true, // default: true
  useDispatchedActionData: true, // default: false
});
```

### [routeChangeTimeoutMs](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/react-navigation.md#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 `1_000`.

### [enableTimeToInitialDisplay](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/react-navigation.md#enabletimetoinitialdisplay)

This option will enable automatic measuring of the time to initial display for each route. To learn more see [Time to Initial Display](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md). The default value is `false`.

### [ignoreEmptyBackNavigationTransactions](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/react-navigation.md#ignoreemptybacknavigationtransactions)

This ensures that transactions that are from routes that've been seen and don't have any spans, are not being sampled. This removes a lot of clutter, making it so that most back navigation transactions are now ignored. The default value is `true`.

### [useDispatchedActionData](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/react-navigation.md#usedispatchedactiondata)

This option defines whether to use the dispatched action data to populate the transaction metadata. When set to true, the integration will filter out navigation actions that should not create spans. The default value is `false`.

## [Notes](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/react-navigation.md#notes)

* This instrumentation supports React Navigation version 5 and above. Starting with SDK version 6, React Navigation version 4 will no longer be supported. Please upgrade.

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

* If you are coming from a version prior to 2.3.0, make sure you update where `registerNavigationContainer` is called. For more detailed instructions, see [our migration guide](https://docs.sentry.io/platforms/react-native/migration.md#react-navigation-instrumentation-from-230).