My screen names aren't appearing in Firebase Analytics Dashboard

Question

I am trying to track screen names on react-native-firebase in conjunction with react-navigation.

Here is my code.

const tracker = firebase.analytics()

function getCurrentRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
	// dive into nested navigators
  if (route.routes) {
    return getCurrentRouteName(route);
  }
  return route.routeName;
}

export default class AppNavigation extends Component {

	render() {
		StatusBar.setBarStyle('light-content');

		return (
			<MainScreenNavigator 
				onNavigationStateChange={(prevState, currentState) => {
					const currentScreen = getCurrentRouteName(currentState);
					const prevScreen = getCurrentRouteName(prevState);
		
					if (prevScreen !== currentScreen) {
						// the line below uses the Google Analytics tracker
						// change the tracker here to use other Mobile analytics SDK.
						tracker.setCurrentScreen(currentScreen);
					}
				}}
			/>
		);
	}
}

When I console log the screen names, they appear as desired. However, I'm not seeing the results in Firebase console. When I filter screen by name it just says (not set). Am I doing something wrong in my code? I am importing firebase from 'react-native-firebase' as well.

Answer 1

The code above is solid. It turns out you have to wait a half a day or so before data is populated. Not sure if I missed that in the docs. If you're using react-navigation and firebase, this code works!