firebaseをインストール
shell
npx expo install @react-native-firebase/app
firebase からダウンロードした GoogleService-Info.plist
をプロジェクトのルートに配置して、 app.json
の ios
で読み込みます。 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
のコマンドを実行して、ローカルでアプリをビルドして、シミュレーターでアプリを起動します。