Docs Performance Integration guides React Native Navigation libraries React Navigation
bugsnag.com Start Free Trial

React Navigation

If you use React Navigation in your app (version 5 and above), you can record the timings of app navigation events shown on the BugSnag Performance dashboard.

Installation

Install the @bugsnag/plugin-react-navigation-performance plugin:

yarn add @bugsnag/plugin-react-navigation-performance
# or
npm install --save @bugsnag/plugin-react-navigation-performance

To use the plugin, include it in the plugins configuration option when you start the BugSnag Performance client:

import BugsnagPerformance from '@bugsnag/react-native-performance'
import BugsnagPluginReactNavigationNativePerformance from '@bugsnag/plugin-react-navigation-performance'

const bugsnagNavigationPlugin = new BugsnagPluginReactNavigationNativePerformance()

BugsnagPerformance.start({
  apiKey: 'YOUR_API_KEY',
  plugins: [bugsnagNavigationPlugin]
})

Configuration

To track navigation events, use the plugin to wrap your NavigationContainer at the root of your app:

function App() {
  const BugsnagPerformanceNavigationContainer = BugsnagPerformance
    .getPlugin(BugsnagPluginReactNavigationNativePerformance)
    .createNavigationContainer(NavigationContainer)

  return (
    <BugsnagPerformanceNavigationContainer>
      { /* your navigation stack here */ }
    </BugsnagPerformanceNavigationContainer>
  )
}

When using the BugSnag Performance and Error SDKs together, you will need to wrap the NavigationContainer with both methods:

function App() {
  const BugsnagPerformanceNavigationContainer = BugsnagPerformance
    .getPlugin(BugsnagPluginReactNavigationNativePerformance)
    .createNavigationContainer(NavigationContainer)

  const BugsnagNavigationContainer = Bugsnag
    .getPlugin('reactNavigation') 
    .createNavigationContainer(BugsnagPerformanceNavigationContainer)

  return (
    <BugsnagNavigationContainer>
      { /* your navigation stack here */ }
    </BugsnagNavigationContainer>
  )
}

Ending navigation spans

React Navigation doesn’t provide a way for us to detect when a navigation has ended. To mark the end of the navigation span, we therefore provide a CompleteNavigation component.

The CompleteNavigation component is used to wrap screens or components and permits the navigation span to end, depending on the value of the on prop, which can be "mount", "unmount" or a boolean expression.

For example, wrapping a screen, providing a boolean expression to the on prop.

import { CompleteNavigation } from '@bugsnag/plugin-react-navigation-performance';

export function HomeScreen() {
  const { data, dataLoading } = useStateManagement(); 

  return (
    <CompleteNavigation on={data && !dataLoading}>
      <SafeAreaView>
        <Text>Home Screen</Text>
      </SafeAreaView>
    </CompleteNavigation>
  );
}

The value "unmount" is designed for adding to a component such as a placeholder view or loading spinner. Once all wrapped loading components are unmounted (and once any other CompleteNavigation conditions are met), the navigation will complete:

import { CompleteNavigation } from '@bugsnag/plugin-react-navigation-performance';

export function LoadingComponent() {
  return (
    <CompleteNavigation on="unmount">
      <View>
        <Text>Loading...</Text>
      </View>
    </CompleteNavigation>
  );
}

export function Screen () {
  const { data, loading } = useStateManagement();

  return (
    <View>
      {loading ? <LoadingComponent /> : <SomeOtherComponent data={data} />}
    </View>
  )
}

If there are multiple CompleteNavigation components on the screen, the span will remain open until all CompleteNavigation components have completed their on condition.