React Native 파이어베이스(Firebase) 연동하기

Firebase Console 접속

https://console.firebase.google.com/

로그인 - Google 계정

프로젝트 생성을 누릅니다.

 

패키지 이름, 앱 닉네임 적기

자신의 앱의 번들 id를 작성합니다.

 

google-services.json 파일 안드로이드 프로젝트에 추가하기

build.gradle 수정

가이드에 맞게 코드를 삽입합니다.

구글 firebase 가이드

앱 수준의 build.gradle  (<project>/<app-module>/build.gradle)

프로젝트 수준의 build.gradle  (<project>/build.gradle)

build.gradle 수정 후 idle의 sync now 버튼을 클릭

 

모바일 광고 SDK 가져오기

app/build.gradle 에 아래 코드를 삽입합니다.

implementation 'com.google.firebase:firebase-ads:18.0.0'

 

AndroidManifest.xml 수정

AndroidManifest.xml 파일에 아래 코드를 삽입합니다.

<manifest>
    <application>
    ...
        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="[ADMOB_APP_ID]"/>
    ...
    </application>
</manifest>

ADMOB_APP_ID는 자신의 애드몹 ID를 넣습니다.

 

MainApplication.java 수정

android/app/src/main/java/com/[app name]/MainApplication.java 파일에 아래코드를 삽입합니다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...
    // Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713
    MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");
}

YOUR_ADMOB_APP_ID 에는 자신의 애드몹 ID를 삽입합니다.

 

...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.admob.RNFirebaseAdMobPackage;
import io.invertase.firebase.analytics.RNFirebaseAnalyticsPackage;
...

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new RNFirebaseAdMobPackage()); // <- 추가
          packages.add(new RNFirebaseAnalyticsPackage()); // <- 추가
          return packages;
        }

...

 

이제 javascript 부분(App.js)에서 배너 광고를 생성하여 화면에 제대로 나오는지 확인합니다.

...
import firebase from 'react-native-firebase';
...

const App = () => {
  const unitId =
    Platform.OS === 'android'
      ? 'YOUR_ID'
      : 'YOUR_ID';

  const Banner = firebase.admob.Banner;
  const AdRequest = firebase.admob.AdRequest;
  const request = new AdRequest();

  return (
    
        <Banner
          unitId={unitId}
          size={'SMART_BANNER'}
          request={request.build()}
          onAdLoaded={() => {
            console.log('Advert loaded');
          }}
        />
  );
};

export default App;

Reference

https://firebase.google.com/docs/admob/android/quick-start

Android 스튜디오 시작하기  |  Firebase

https://rnfirebase.io/docs/v5.x.x/storage/android

React Native Firebase - Simple Firebase integration for React Native