@bugsnag/plugin-react-native-navigation-performance
v2.10.0
Published
BugSnag performance monitoring for react-native-navigation
Downloads
49
Keywords
Readme
@bugsnag/plugin-react-native-navigation-performance
A [React Native Navigation] (https://wix.github.io/react-native-navigation/docs/before-you-start/) integration for BugSnag Performance
Usage
import BugsnagPerformance from "@bugsnag/react-native-performance"
import BugsnagPluginReactNativeNavigationPerformance from '@bugsnag/plugin-react-native-navigation-performance'
import { Navigation } from 'react-native-navigation'
BugsnagPerformance.start({
apiKey: "my-api-key",
plugins: [new ReactNativeNavigationPlugin(Navigation)]
})
export function registerScreens() {
Navigation.registerComponent('Screen 1', () => Screen1);
Navigation.registerComponent('Screen 2', () => Screen2);
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'Screen 1'
}
}
]
}
}
})
}
Ending Navigation Spans
React Native 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 individual screens or components and ends the navigation span depending on the value of the on prop, which can be "mount", "unmount" or a boolean expression.
import { SafeAreaView, Text, Image } from 'react-native'
import { CompleteNavigation } from '@bugsnag/plugin-react-native-navigation-performance'
import { useProfileData } from 'some-data-management-library'
const ProfileScreen = () => {
const { data, loadingComplete } = useProfileData()
return (
<SafeAreaView>
<CompleteNavigation on={loadingComplete} >
<Text>ProfileScreen</Text>
</SafeAreaView>
)
}