5

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.

myself
  • 395
  • 4
  • 13
  • Just to clarify, what platform is that (iOS or Android)? Have you tried turning on the Debug View to make sure that the screen name appears on the Debug View in real-time yet? – adbitx Mar 21 '18 at 01:20
  • No, I hadn't. Interestingly enough, I have all the data now. It appears to be lagging by a half day or so. Either way it's working now. – myself Mar 21 '18 at 12:46

1 Answers1

5

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!

myself
  • 395
  • 4
  • 13