좌충우돌 개발 블로그

기존에 사용하던 라이브러리로 AdMob 광고를 표시하고 있었는데

정책 위반 메일을 받아서 이를 처리할 필요가 있었다.

그래서 react-native-admob 저장소에서 문서를 읽어봤다.

isReady 메소드로 처리가 가능하겠다는 생각이 들었다.

그러다 우연히 react-native-firebase에서 AdMob 라이브러리가 생긴 것을 확인했다.

기존에 사용하던 것은 아직 beta였지만

react-native-firebase에서는 정식 버전이라 더 안정적으로 보여 변경하기로 했다.

$ npm install @react-native-firebase/admob
$ react-native link @react-native-firebase/admob

프로젝트 디렉토리에 firebase.json을 만들고 다음을 추가한다.

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

사용법은 다음과 같다.

import {
  AdEventType,
  BannerAd,
  BannerAdSize,
  InterstitialAd,
  TestIds
} from '@react-native-firebase/admob'

const interstitialAd = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);
interstitial.onAdEvent((type) => {
    if (type === AdEventType.LOADED) {
        interstitial.show();
    }
}
interstitial.load();

<BannerAd
  unitId={TestIds.BANNER}
  size={BannerAdSize.SMART_BANNER}
  requestOptions={{
    requestNonPersonalizedAdsOnly: true,
  }}
  onAdLoaded={() => {
    console.log('Advert loaded');
  }}
  onAdFailedToLoad((error) => {
    console.error('Advert failed to load: ', error);
  })
/>

참고 문헌

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

앱을 개발하다보니 설정된 내용을 저장할 필요가 있어 async-storage를 사용하게 되었다.

React Native 버전이 0.59 이하인 경우 아래와 같이 하면 된다.

버전이 0.60 이상인 경우 link를 해주지 않아도 된다.

$ npm install @react-native-community/async-storage
$ react-native link @react-native-community/async-storage

데이터를 불러올 때 예제에서는 async, await 를 사용하는데

constructor에서는 사용할 수 없어 componentDidMount를 async 함수로 사용했다.

constructor() {
  super();
  this.state = {
    ...,
    isLoading: true,
    ...
  };
}

async componentDidMount () {
  ...
  try {
    const value = await AsyncStorage.getItem('key');
    if (value !== null) {
      const data = JSON.parse(value);
      this.setState(data);
    }
  } finally {
    this.setState({isLoading: false});
  }
  ...
}

storeData = async (value) => {
  try {
    await AsyncStorage.setItem('key', value)
  } catch (e) {
  }
}

isLoading을 넣어준 이유는 데이터를 읽은 후 setState 함수에서 상태를 변경하는데

상태가 변경되기 전에 렌더링이 된 후 상태가 변경된 후 다시 렌더링을 되는 것을 막기 위해 추가했다.

참고 문헌

1. https://github.com/react-native-community/async-storage

앱을 배포한 이후에 비정상 종료에 다음과 같은 내용들이 올라왔다.

Caused by: java.lang.ClassNotFoundException:
  at dalvik.system.BaseDexClassLoader.findClass (BaseDexClassLoader.java:93)

이를 해결하기 위해 검색한 결과 multidex를 추가하면 해결이 된다는 내용을 보고 추가하기로 했다.

기본적인 내용들은 여기에서 보면 된다.

AndroidX를 사용하고 있어서 이를 기준으로 내용을 추가했다.

dependencies {
    ...
    implementation "androidx.multidex:multidex:2.0.1"
    ...
}

attachBaseContext 함수를 추가할 때 라이브러리를 임포트해줘야하는데 다음과 같다.

...
import android.content.Context;
import androidx.multidex.MultiDex;
...

public class MainApplication extends Application implements ReactApplication {
  ...
  @Override
  protected void attachBaseContext(Context base) {
     super.attachBaseContext(base);
     MultiDex.install(this);
  }
  ...
}

참고 문헌

1. https://developer.android.com/studio/build/multidex?hl=ko

앱을 릴리즈로 빌드한 다음 실제 기기나 에뮬레이터에서 실행했을 때 충돌(Crash)이 나는 경우가 있다.

이럴 땐 어디서 에러가 났는지 확인해야하는데 다음의 명령어로 로그를 확인할 수 있다.

$ adb logcat *:E

이번에 react-native-svg를 적용하면서 앱이 실행과 동시에 죽는 경우가 발생했다.

이를 해결하기 위해 위의 명령어로 로그를 살펴보니 다음과 같이 나왔다.

07-01 02:49:52.865 26792 26792 E AndroidRuntime: java.lang.IllegalStateException: java.lang.NoSuchFieldException: fill
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.t.a(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.ad.a(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.t.d(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.j.b(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.j.a(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.t.d(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.j.b(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.j.a(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.t.d(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.j.b(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.j.a(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.t.d(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.x.a(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.x.j(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at com.horcrux.svg.x.onDraw(Unknown Source)
07-01 02:49:52.865 26792 26792 E AndroidRuntime:     at android.view.View.draw(View.java:17185)

progaurd로 난독화를 한 후 찾지 못해서 난 오류로 해당 라이브러리를 난독화에서 제외하면 된다.

해결 방법은 android/app/progauard-rules.pro에 다음을 추가하고 빌드하면 된다.

-keep public class com.horcrux.svg.** {*;}

참고 문헌

1. https://github.com/react-native-community/react-native-svg/issues/481