React Nativeの64bit対応

はじめに

GoogleからGoogle Playに公開しているアプリが64bitに対応していないから対応するように！というメールが来てました。
ドキュメントを見たら簡単にできそうなのでやってみたのですが、64bit対応するにはReact Nativeのバージョンを上げる必要があった事もあり、めちゃくちゃ大変でした。（休日が潰れた・・・）
大変だった思い出を残す事にしました。（完全な思い出メモなので、今後の役に立つかは微妙です。）

パッケージのバージョンアップ

react：16.0.0 → 16.8.6
react-native：0.51.1 → 0.59.8
native-base：2.4.5 → 2.12.1
flow-bin：0.67.1 → 0.100.0
react-native-localization：1.0.12 → 2.1.2
react-native-progress：3.5.0 → 3.6.0
react-native-splash-screen：3.0.6 → 3.2.0
react-native-sqlite-storage：3.3.6 → 3.3.10
react-native-vector-icons：5.0.0 → 6.4.2
react-navigation：2.10.0 → 3.11.0

metro-react-native-babel-preset：0.54.1（追加）
react-native-gesture-handler：1.3.0（追加）
react-native-firebase: 5.4.2（追加）

react-native-admob：不安定でメンテナンスされていないため削除。react-native-firebaseに置き換える事にする。

追加後に、

react-native link

build.gradleの修正

buildToolsVersionとかcompileSdkVersionを正しく指定しないとエラーになるのですが、ここはいつもトライ＆エラーで時間が掛かります。
すぐに解決できる方法は無いのでしょうか。
今回は以下で動きました。

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "27.1.1"
    }
    repositories {
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.2'
        classpath 'com.google.gms:google-services:4.2.0'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

追加

subprojects { subproject ->
    afterEvaluate{
        if((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                compileSdkVersion rootProject.ext.compileSdkVersion
                buildToolsVersion rootProject.ext.buildToolsVersion
            }
        }
    }
}

末尾に追加

task wrapper(type: Wrapper) {
    gradleVersion = '4.10.1'
    distributionUrl = "https\\://services.gradle.org/distributions/gradle-4.10.1-all.zip"
}

app\build.gradleの修正

64bit化の部分①

splits {
    abi {
        include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
    }
}

64bit化の部分②

applicationVariants.all { variant ->
    variant.outputs.each { output ->
        def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
    }
}

react-nativeのバージョンアップ、react-native-firebaseの追加などによって修正が必要

dependencies {
    implementation project(':react-native-firebase')
    implementation project(':react-native-gesture-handler')
    compile ("com.facebook.react:react-native:0.59.8") { force = true }
    implementation "com.google.android.gms:play-services-base:16.1.0"
    implementation "com.google.firebase:firebase-core:16.0.9"
    implementation "com.google.firebase:firebase-ads:15.0.1"
}

末尾に追加

apply plugin: 'com.google.gms.google-services'

app\proguard-rules.proの修正

React Native Firebaseのドキュメントに書いてあったので追加

-keep class io.invertase.firebase.** { *; }
-dontwarn io.invertase.firebase.**

gradle\wrapper\gradle-wrapper.propertiesの修正

修正前は「gradle-3.5.1-all.zip」でした。

distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

.babelrcの修正

metro-react-native-babel-preset を使用するように修正

{
  "presets": ["module:metro-react-native-babel-preset"]
}

settings.gradleの修正

include ':react-native-firebase'
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

MainActivity.javaの修正

react-navigationをv2からv3に上げた事により、react-native-gesture-handlerというものが必要になりました。
そのための修正です。

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
            return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
    };
}

MainApplication.javaの修正

react-native-gesture-handlerとreact-native-firebaseを追加した事による修正

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

@Override
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.admob.RNFirebaseAdMobPackage;

@Override
protected List getPackages() {
  return Arrays.asList(
      new RNGestureHandlerPackage(),
      new RNFirebasePackage(),
      new RNFirebaseAdMobPackage()
  );
}

エラー吐きまくりでめっちゃ大変でしたが、何とか動くところまでこぎつけました。
react-native-firebase入れたら、アプリのサイズが大きくなったのを何とかしたいです。

未分類

Posted by ababa