expo で firebae analyticsを使う( iOS )

firebaseをインストール

shell
npx expo install @react-native-firebase/app

firebase からダウンロードした GoogleService-Info.plist をプロジェクトのルートに配置して、 app.jsonios で読み込みます。 plugins にも @react-native-firebase/app を設定します。

app.json
{
  "expo": {
    // ...
    "android": {
      "googleServicesFile": "./google-services.json"
      // ...
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
      // ...
    },
    "plugins": [
      "@react-native-firebase/app"
      // ...
    ]
  }
}

prebuild を実行します。

shell
npx expo prebuild

Firebase Analytics をインストールします。

shell
npx expo install @react-native-firebase/analytics
app/_layout.tsx
import analytics from '@react-native-firebase/analytics';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack, usePathname } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';

import { useColorScheme } from '@/components/useColorScheme';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
};

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const pathname = usePathname();
  useEffect(() => {
    const logScreenView = async () => {
      console.log('Logging screen view:', pathname);
      try {
        await analytics().logScreenView({
          screen_name: pathname,
          screen_class: pathname,
        });
      } catch (err: any) {
        console.error(err);
      }
    };
    logScreenView();
  }, [pathname]);
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return <RootLayoutNav />;
}

import analytics from '@react-native-firebase/analytics'; で analytics を import。

await analytics().logScreenView で analytics にデータを送ります。

そして npx expo run:ios のコマンドを実行して、ローカルでアプリをビルドして、シミュレーターでアプリを起動します。