[Expo] Google Analytics 적용(feat. Firebase)(2)

1. Expo 프로젝트에 Firebase를 적용하기 위한 준비
2. React Native Firebase를 Expo 프로젝트에 적용(+ Firebase Analytics)

 

앞서 custom native code를 추가한 Expo 프로젝트에 Firebase를 연결해 보자!

사실 React Native Firebase의 내용을 차근차근 따라하면 적용시키는데에 전혀 문제가 없지만, 그래도 간략히 정리해보자.

---

Installation

NPM 또는 Yarn을 사용하여 프로젝트의 root에 @react-native-firebase/app 을 설치

→ Firebase의 기능들을 사용하기 위해서는 @react-native-firebase/app 모듈이 반드시 설치되어 있어야 한다!

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

 

* Android와 iOS를 세팅하기 이전에, Firebase 프로젝트가 없다면 만들어주어야 한다.

 

1. Firebase 콘솔 화면에서 연동할 프로젝트로 이동
2. 상단의 '+앱 추가'를 클릭하여 추가할 플랫폼을 선택 - iOS | Android | Web | Unity | Flutter 중 선택 가능
      →   
3. 이동된 페이지의 안내에 따라 하기 순서대로 진행하면 앱 등록 완료!
   앱 등록 정보를 모두 입력 → 구성파일(google-services.json / GoogleService-Info.plist)을 다운로드 → Firebase SDK 추가

 

Expo project Setup

Expo에 의해 관리되어지는 프로젝트의 경우, Android와 iOS를 한번에 관리해 줄 수 있다.

1. (앞서 다운받지 않았다면) Intall  @react-native-firebase/app 
2. app.json 혹은 app.config.js 파일에 Firebase에서 앱 등록하며 받은 GoogleService 파일을 등록

// app.json
{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/perf",
      "@react-native-firebase/crashlytics",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"	// ONLY for iOS
          }
        }
      ]
    ]
  }
}

 

* Eject를 한 Bare project는 Android Setup 과 iOS Setup을 각각 해줘야 한다.

**  expo prebuild  명령어를 사용해서 Native code를 추가한 프로젝트에서는 상기와 같이 app.json 파일을 수정한 뒤,
      expo prebuild --clean 명령어로 다시 prebuild 해주어야 변동사항이 반영되는 점 꼭 기억하자

 

---

참고 자료

• React Native Firebase
• Expo BuildProperties