Skip to main content

Firebase Analytics Integration in React Native

This guide explains how to integrate Firebase Analytics into your React Native app and track custom events. We'll also show you how to automatically track screen views and log 5 custom events as an example.

Prerequisites​

  • A React Native project (with iOS and/or Android setup)
  • Firebase project created at console.firebase.google.com
  • Installed @react-native-firebase libraries

1. Install Dependencies​

Install the Firebase Core and Analytics modules:

npm install @react-native-firebase/app @react-native-firebase/analytics

Or with yarn:

yarn add @react-native-firebase/app @react-native-firebase/analytics

2. Firebase Console Setup​

Android​

  1. Add an Android app to your Firebase project.
  2. Download the google-services.json file and place it inside: 
    android/app/
  3. Update android/build.gradle: 
    buildscript {
      dependencies {
        classpath 'com.google.gms:google-services:4.4.2'
      }
    }
  4. Update android/app/build.gradle: 
    apply plugin: 'com.google.gms.google-services'

iOS​

  1. Add an iOS app to your Firebase project.
  2. Download the GoogleService-Info.plist file.
  3. Drag it into Xcode in the ios/YourApp directory.
  4. Run: 
    cd ios && pod install && cd ..
  5. Ensure platform :ios, '17.0' or higher is set in your Podfile.

3. Screen View Tracking (React Navigation)​

In your main navigation file (e.g., AppContainer.tsx), add screen view tracking:

import React, { useRef } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import RootNavigator from './navigators/RootNavigator'
import analytics from '@react-native-firebase/analytics'

const AppContainer = () => {
  const routeNameRef = useRef<string | undefined>()
  const navigationRef = useRef<any>()

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        const initialRoute = navigationRef.current?.getCurrentRoute()?.name
        routeNameRef.current = initialRoute
        if (initialRoute) {
          analytics().logScreenView({
            screen_name: initialRoute,
            screen_class: initialRoute,
          })
        }
      }}
      onStateChange={async () => {
        const currentRouteName = navigationRef.current?.getCurrentRoute()?.name
        const previousRouteName = routeNameRef.current

        if (currentRouteName && previousRouteName !== currentRouteName) {
          await analytics().logScreenView({
            screen_name: currentRouteName,
            screen_class: currentRouteName,
          })
        }

        routeNameRef.current = currentRouteName
      }}
    >
      <RootNavigator />
    </NavigationContainer>
  )
}

export default AppContainer

4. Log Custom Events​

You can log events using analytics().logEvent() anywhere in your app.

Examples​

import analytics from '@react-native-firebase/analytics'

// Log a button press event
await analytics().logEvent('button_click', {
  button_name: 'GetStarted',
})

// Log user registration
await analytics().logEvent('sign_up', {
  method: 'email',
})

// Log product view
await analytics().logEvent('view_product', {
  product_id: '12345',
  product_name: 'React Native Template',
})

// Log add to cart
await analytics().logEvent('add_to_cart', {
  product_id: '12345',
  quantity: 1,
})

// Log custom event
await analytics().logEvent('app_feedback', {
  rating: 5,
  comment_length: 42,
})

5. Debugging Analytics​

Android​

  1. Enable analytics debug mode using ADB: 
    adb shell setprop debug.firebase.analytics.app your.package.name
  2. Then check Logcat or visit Analytics > DebugView in the Firebase Console.

iOS​

  1. In Xcode, enable analytics debug logging by setting launch arguments: 
    -FIRAnalyticsDebugEnabled
  2. Or run from terminal: 
    export FIRDebugEnabled=1

Summary​

✅ You now have:

  • Firebase Analytics installed
  • Screen view tracking implemented
  • 5 custom events logged
  • Debug mode enabled for testing

You can now monitor your users' behavior and optimize your app based on real data.

For full event list and recommendations, check the Firebase Analytics Event Reference.

Common Use Cases​

Here are some common events you might want to track in different types of apps:

Chat App​

// Track when user sends a message
await analytics().logEvent('send_message', {
  message_type: 'text',
  chat_type: 'private',
  character_count: 42
})

// Track when user creates a group
await analytics().logEvent('create_group', {
  group_size: 5,
  has_group_image: true
})

// Track when user opens a chat
await analytics().logEvent('open_conversation', {
  conversation_id: 'chat123',
  participant_count: 2,
  is_unread: true
})

Social Network App​

// Track when user creates a post
await analytics().logEvent('create_post', {
  post_type: 'photo',
  has_location: true
})

// Track when user follows someone
await analytics().logEvent('follow_user', {
  followed_user_id: 'user123'
})

E-commerce App​

// Track product purchase
await analytics().logEvent('purchase', {
  transaction_id: 'T12345',
  value: 29.99,
  currency: 'USD',
  items: [{id: 'SKU123', name: 'Premium T-shirt'}]
})

// Track when a user adds shipping information
await analytics().logEvent('add_shipping_info', {
  coupon: 'SUMMER20',
  shipping_tier: 'overnight'
})

Dating App​

// Track when user creates a profile
await analytics().logEvent('create_profile', {
  photos_count: 3,
  bio_length: 120
})

// Track user match
await analytics().logEvent('match_found', {
  time_to_match: 86400 // in seconds
})