React Native Firebase Analytics is Google Analytics for Firebase added to a React Native app with the module @react-native-firebase/analytics. It logs events, screen views and user properties from your iOS and Android apps. Some events are collected automatically, and screen views need a call from your navigation code. Setup takes the app and analytics packages, a Firebase project, its config files and a rebuild.
| Step | What to do | Detail |
|---|---|---|
| 1. Install | Add @react-native-firebase/app and @react-native-firebase/analytics | Run pod install for iOS |
| 2. Create a Firebase project | Register your iOS and Android apps | Download GoogleService-Info.plist and google-services.json |
| 3. Configure native projects | Add the config files and the Google services plugin | Follow the React Native Firebase install steps for each platform |
| 4. Log events and screens | Call logEvent() and logScreenView() | Log screen views from React Navigation's onStateChange |
| 5. Rebuild and verify | Rebuild the app and check the events in Firebase | Expo needs config plugins and a development build |
Firebase Analytics is where many React Native teams start: it's free, it comes with Firebase and it counts what users do. This guide shows how to add it to a React Native app today, what it tracks on its own and where it stops. It also shows how UXCam adds session replays and heatmaps on top.
UXCam has helped teams at Costa Coffee, JobNimbus and PlaceMakers improve their apps. At Costa Coffee, custom events and funnels showed that about 15% of new users dropped off after entering invalid passwords. Fixing the registration flow raised app registrations by 15%.
Firebase Analytics, also called Google Analytics for Firebase, is Google's free analytics for mobile apps. It's part of Firebase, Google's platform of app services such as authentication, databases, crash reporting and analytics.
Firebase Analytics reports on four things you'll use to improve your app:
Events: Actions users take in your app, such as opening it, viewing a product or finishing a level.
User properties: Attributes of your users, such as their plan, language or favorite category.
Key events: The actions you want users to take, such as finishing sign-up or buying a subscription. Google Analytics used to call these conversions.
Audiences: Groups of users you define, such as everyone who bought something in the last 30 days.
Firebase Analytics gives you solid event data at no cost, and it fits neatly with other Google products.
You can see how users behave, which features they use and who they are, broken down by device, country and other attributes.
You can log custom events for the actions that matter to you, such as sign-ups, purchases and content views.
National Public Radio used Firebase Analytics to understand listening habits in its mobile app. By tracking custom events such as "episode played" and "episode completed", NPR could see how people engaged with each show. That helped the team tailor content and improve the app.
The Realtime report shows what users are doing right now. That's useful for checking the effect of a release or a campaign within minutes.
Funnel reports show the step where users leave a flow, such as sign-up or checkout. That tells you which step to look at first.
Firebase works with Google Ads and other Google products, so you can connect what users do in your app to the campaigns that brought them in.
React Native is Meta's open-source framework for building iOS and Android apps with JavaScript and React. Companies such as Meta, Microsoft, Shopify and Amazon use it in production, according to the React Native showcase.
You add Firebase Analytics with two React Native Firebase packages, a Firebase project and a rebuild. These steps follow the React Native Firebase docs for apps built with the React Native CLI. Expo apps use config plugins instead (step 6).
In your project root, run npm install @react-native-firebase/app @react-native-firebase/analytics. With Yarn, run yarn add with the same two packages. The app module must be installed before any other Firebase module.
Open the Firebase console and create a project. Then register your iOS and Android apps. The Android package name must match the namespace in android/app/build.gradle.
Download GoogleService-Info.plist for iOS and google-services.json for Android. You'll add both files in the next step.
Place google-services.json in the android/app folder. Then add the Google services Gradle plugin, com.google.gms:google-services, to the buildscript dependencies in android/build.gradle. The React Native Firebase docs currently use version 4.5.0.
Finally, apply the plugin in android/app/build.gradle by adding apply plugin: 'com.google.gms.google-services' below the Android application plugin.
Add GoogleService-Info.plist to your iOS project in Xcode. Then initialize Firebase at the top of didFinishLaunchingWithOptions in your AppDelegate. In Swift, that's FirebaseApp.configure(). In Objective-C, it's [FIRApp configure], with the Firebase import at the top of the file.
Next, open ios/Podfile and add use_frameworks! with dynamic linkage inside your app target. React Native Firebase's docs warn that static linkage fails with current Firebase SDKs.
Lastly, run pod install --repo-update inside the ios folder.
There's nothing to initialize in JavaScript. Once the native setup is done, Analytics starts on its own and logs a set of events automatically.
For your own events, import getAnalytics and logEvent from @react-native-firebase/analytics and call logEvent with an event name and its parameters. Screen views need one more step. Automatic screen tracking only records native class names, which don't match your React screens. So call logScreenView from React Navigation's onStateChange handler, with the current route name as the screen name.
Two details save debugging time. Events from debug builds aren't logged by default, so turn on DebugView for the device you're testing on. And if users must opt in first, set analytics_auto_collection_enabled to false in firebase.json, then call setAnalyticsCollectionEnabled once they agree.
Rebuild both apps so the native changes take effect: npx react-native run-android for Android, and npx react-native run-ios for iOS.
Then open your app, trigger a few events and check that they arrive in the Firebase console.
React Native Firebase doesn't run in Expo Go, because it needs native code. Install the modules with npx expo install and add their config plugins to app.json. Then point googleServicesFile to your two config files and set iOS to dynamic frameworks with expo-build-properties. Build a development build or use EAS Build to run the app.
Add UXCam when you need to see what users did, as well as how many did it. Firebase Analytics can tell you that users drop out of sign-up. UXCam's session replays and heatmaps show the screen and the taps where they got stuck.
UXCam captures gestures, rage taps, UI freezes and native crashes automatically. In React Native, you add one tagScreenName() call per screen, so every interaction is tied to a named screen. Tara, UXCam's AI analyst, then points you to where users struggle without being asked.
The two tools also work together. RNUxcam.urlForCurrentSession() returns the URL of the current UXCam session. Attach it to your Firebase events as a parameter, and each event links to the replay behind it.
Most React Native teams use both. Firebase Analytics counts events for free, and UXCam shows the sessions, heatmaps and funnels behind them. UXCam's in-depth UX analytics, session replay and heatmaps also cover your website, from the same account.
UXCam's Firebase and Google Analytics integration connects the two, so you can look at your events from both sides. Start your UXCam free trial today.
FAQ
Install @react-native-firebase/app and @react-native-firebase/analytics, then register your iOS and Android apps in a Firebase project. Add the config files to the native projects, run pod install and rebuild. Events then flow to Firebase, and you can log custom ones with logEvent().
Only partly. Firebase records the native UIViewController or Activity in focus, but React Native screens are JavaScript components inside it. To track real screens, call logScreenView() with the route name from React Navigation's onStateChange handler.
Yes, with a development build or EAS Build. React Native Firebase uses native code that isn't compiled into Expo Go, so it can't run there. Add each module's config plugin to your app config, then build the app with EAS.
Yes. Firebase's pricing page lists Google Analytics as a no-cost product, and Crashlytics is free too. Other Firebase services, such as databases and storage, have their own free limits and paid usage.
Firebase Analytics counts events and builds reports from them. UXCam records each session, so you can watch what users did and see heatmaps of every screen. Tara, UXCam's AI analyst, surfaces where users struggle without you asking first. UXCam also has a Firebase and Google Analytics integration, so you can use both.
You might also be interested in these;
React Native Analytics: A Practical Implementation Guide
How to analyze session recordings
React Native Crashlytics: Step-by-Step Setup Guide
The only 10 slides you need to present session replay findings
React Native IAP: Track and Improve In-App Purchases
Ardent technophile exploring the world of mobile app product management at UXCam.
Hotjar doesn't support mobile apps. Learn why mobile and web analytics are fundamentally different, what changed after the Contentsquare acquisition, and the best Hotjar alternative for mobile...
Product Analytics Expert
Discover Contentsquare pricing with a comparison of plans, features, and the best alternatives to help you choose the right digital experience analytics...
Product Analytics Expert
Master React Native Crashlytics integration with our step-by-step guide. Learn how an integration with UXCam can enhance your crash...
Product Analytics Expert

