If you use React Native Navigation in your app, you can record the timings of app navigation events shown on the BugSnag Performance dashboard.
Install the @bugsnag/plugin-react-native-navigation-performance plugin:
yarn add @bugsnag/plugin-react-native-navigation-performance
# or
npm install --save @bugsnag/plugin-react-native-navigation-performance
To use the plugin, include it in the plugins configuration option when you start the BugSnag Performance client, providing the Navigation object from react-native-navigation as follows:
import BugsnagPerformance from '@bugsnag/react-native-performance'
import BugsnagPluginReactNativeNavigationPerformance from '@bugsnag/plugin-react-native-navigation-performance'
import { Navigation } from 'react-native-navigation'
const reactNativeNavigationPlugin = new BugsnagPluginReactNativeNavigationPerformance(Navigation)
BugsnagPerformance.start({
apiKey: 'YOUR_API_KEY',
plugins: [reactNativeNavigationPlugin]
})
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-native-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-native-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.