> ## Content Index > Fetch the complete content index at: https://hybridheroes.de/blog/llms.txt > Use this file to discover other available public pages before exploring further. # Firebase Analytics with React Native: How to track screen views and user interactions - URL: https://hybridheroes.de/blog/2018-10-05-react-native-firebase-analytics/ - Published: 2018-10-05T08:00:00.000Z - Updated: 2024-04-29T11:32:28.000Z - Author: Hybrid Heroes - Tags: Entwicklung, React Native, #Import 2026-07-29 15:59 Firebase is a cloud services provider that comes as a toolset to meet your app needs without the struggle of managing a big infrastructure: From cloud messaging to databases and authentication, it's also offering what is considered as the successor of Google Analytics: **Firebase Analytics**. We will look into how to implement analytics into a [React Native application](https://hybridheroes.de/react-native/) and manage, test and deploy its core features. ### Installing Firebase Adding Firebase to your Android or iOS project happens mostly on the native layer of your application. But in order to access and manipulate its features, you will need a bridge that communicates from Javascript to the native Firebase SDK. I would recommend using **react-native-firebase** for this purpose. The installation procedure is very well explained on the [official website](https://www.rnfirebase.io), so we will not dive into it in this article, but rather focus our attention on the implementation of the Javascript layer. ### Tracking Screens With React Navigation The default screen view event is described like this: ```javascript setCurrentScreen(screenName, screenClassOverride) ``` In our case, we want to automatically track every screen whenever the user navigates from one to another. The best place to hook this event up is with your router. Assuming the use of React Navigation this would be your AppNavigator's *onNavigationStateChange* event. We need a function to get the active route name, and we also need to make sure we only register a change of screens, as *onNavigationStateChange* will also be triggered when using *onNavigationFocus* for example. Using the navigation state, we can retrieve the current route by using this recursive helper function: ```javascript getActiveRouteName(navigationState: NavigationState) { if (!navigationState) { return null; } const route = navigationState.routes[navigationState.index]; // Dive into nested navigators if (route.routes) { return this.getActiveRouteName(route); } return route.routeName; } ``` Let's apply it to *onNavigationStateChange* on our AppNavigator component and track the current route: ```javascript { const currentScreen = this.getActiveRouteName(currentState); const prevScreen = this.getActiveRouteName(prevState); if (prevScreen !== currentScreen) { firebase.analytics().setCurrentScreen(currentScreen); } }} /> ``` If you are using react-navigation in conjunction with **Redux** (practice which is [being deprecated](https://reactnavigation.org/docs/en/redux-integration.html), by the way), the same method can be applied inside your navigate action. That's about it! From now on, every time the user navigates to a new screen, the event will be registered and sent to the Firebase service. ![](https://hybridheroes.de/blog/content/images/2022/03/screenview-1.png) ### Tracking Actions With Higher Order Components Depending on your needs and the data you'd like to gather, tracking user actions can be as valuable as tracking the screens the user is going through. Let's pretend we have a few **Button** components that are used all around the app. We can create a HOC that we will encapsulate these components and track every unique *onPress* event. We can pass event names and parameters to the HOC to help identify them. ```javascript const withTracking = (WrappedComponent) => (props) => { const { onPress, event, eventParams, ...otherProps } = props; return ( { if (event) { firebase.analytics().logEvent(event, eventParams); } props.onPress(); }} /> ); }; ``` We can note how the withTracking HOC can only be applied to Touchable components, in other words components that have an onPress property. Applying it to our Button component, we end up with: ```javascript export default withTracking(Button); ``` Later on, we can leverage the HOC's event handling every time we use our custom Button component. ```javascript