Standard React Native applications run inside a single Activity
/ViewController
, meaning any screen changes won't be
tracked by the native Firebase SDKs. There are a number of ways to implement navigation within React Native apps,
therefore there is no "one fits all" solution to screen tracking.
React Navigation
The React Navigation library allows for various navigation techniques such as
Stack, Tab, Native or even custom navigation. The NavigationContainer
component which the library exposes provides
access to the current navigation state when a screen changes, allowing you to use the logScreenView
method the Analytics library provides:
import analytics from '@react-native-firebase/analytics';
import { NavigationContainer } from '@react-navigation/native';
const App = () => {
const routeNameRef = React.useRef();
const navigationRef = React.useRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef.current.getCurrentRoute().name;
}}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current.getCurrentRoute().name;
if (previousRouteName !== currentRouteName) {
await analytics().logScreenView({
screen_name: currentRouteName,
screen_class: currentRouteName,
});
}
routeNameRef.current = currentRouteName;
}}
>
...
</NavigationContainer>
);
};
export default App;
For a full working example, view the Screen tracking for analytics documentation on the React Navigation website.
React Native Navigation
The wix/react-native-navigation
provides 100% native platform navigation
for React Native apps. To manually track screens, you need to setup a componentDidAppear
event listener and manually call the
logScreenView
method the Analytics library provides:
import analytics from '@react-native-firebase/analytics';
import { Navigation } from 'react-native-navigation';
Navigation.events().registerComponentDidAppearListener(async ({ componentName, componentType }) => {
if (componentType === 'Component') {
await analytics().logScreenView({
screen_name: componentName,
screen_class: componentName,
});
}
});
To learn more, view the events documentation on the React Native Navigation website.