좌충우돌 개발 블로그

앱을 배포한 이후에 사용자가 어떤 행동을 하는지 알고 싶어졌다.

그래서 react-native-firebase를 이용하여 수집하기로 했다.

yarn으로 설치하거나 다음을 실행하면 된다.

$ npm install --save @react-native-firebase/app
$ react-native link @react-native-firebase/app
$ npm install --save @react-native-firebase/analytics
$ react-native link @react-native-firebase/analytics

코드에 추가하는 방법은 3가지가 있는데 가장 간략한 방법으로 추가했다.

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

// analytics().X

다음의 함수들을 이용하여 로그를 수집할 수 있다.

logEvent
resetAnalyticsData
setAnalyticsCollectionEnabled
setCurrentScreen
setMinimumSessionDuration
setSessionTimeoutDuration
setUserId
setUserProperties
setUserProperty

참고 문헌

1. https://github.com/invertase/react-native-firebase/tree/master/packages/analytics

2. https://github.com/invertase/react-native-firebase/tree/master/packages/app

3. https://invertase.io/oss/react-native-firebase/v6/analytics/reference

react-native-webview를 사용할 때 gradle.properties에 다음을 추가해야 한다.

android.useAndroidX=true
android.enableJetifier=true

추가한 후에 빌드할 때 react-native-admob에서 빌드 실패가 나는 경우가 발생한다.

> Task :react-native-admob:compileDebugJavaWithJavac FAILED

이런 경우 jetifier를 설치하면 해결할 수 있다.

$ npm install --save-dev jetifier
$ npx jetify

참고 문헌

1. https://github.com/facebook/react-native/issues/25307

2. https://stackoverflow.com/questions/53235525/issues-using-androidx-and-react-native

react-native로 만든 앱에 광고를 넣기 위해 react-native-admob을 사용했다.(안드로이드만 사용)

$ npm i --save react-native-admob@next
$ react-native link react-native-admob@next

android/app/build.gradle에 다음을 추가한다.

dependencies {
    ...
    implementation "com.google.firebase:firebase-core:17.0.0"
    implementation "com.google.firebase:firebase-ads:17.2.1"
}

사용법은 다음과 같다.

import {
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
} from 'react-native-admob'

// 배너 광고
<AdMobBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[AdMobBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
/>

// DFP(Doubleclick For Publisher) - 조건을 상세하게 커스터마이징할 수 있는 배너
<PublisherBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[PublisherBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
  onAppEvent={event => console.log(event.name, event.info)}
/>

// 전면 광고
AdMobInterstitial.setAdUnitID('your-admob-unit-id');
AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd());

// 리워드 광고
AdMobRewarded.setAdUnitID('your-admob-unit-id');
AdMobRewarded.requestAd().then(() => AdMobRewarded.showAd());

배너 광고를 추가한 뒤 에뮬레이터로 확인하면 경고가 뜨는데 이 경우엔 다음과 같이 하면 해결할 수 있다.

node_modules/react-native-admob/RNAdMobBanner.js에서

UIManager.RNGADBannerView.Commands.loadBanner를

UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner로 변경하면 된다.

27  loadBanner() {
28    UIManager.dispatchViewManagerCommand(
29      findNodeHandle(this._bannerView),
30      UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner,
31      null,
32    );
33  }

참고 문헌

1. https://github.com/sbugert/react-native-admob/issues/339

UPDATE

React Native에서 특정 폰트를 사용하기 위해서 폰트를 추가해야하는데 다음과 같이 하면 된다.

1. fonts 디렉토리를 만들어 폰트를 넣어준다.

   react-native-app
   │   README.md
   │   index.ios.js
   │   index.android.js
   └── ios
   └── android
   └── src
   │   │
   │   └── assets
   │       └── fonts
   │            └── 폰트

2. package.json에 다음을 추가한다.

   ...
   "rnpm": {
    "assets": [
      "src/assets/fonts"
    ]
   }

3. 다음 명령어를 실행하면 ios/andorid에 자동으로 폰트가 추가된다.

   $ react-native link

4. 다음처럼 스타일을 적용하는 부분에 넣어 사용하면 된다.

   fontFamily: '폰트이름'

참고 문헌

1. https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4