Importing Android project of React-Native to Android Studio

Question

I've created a simple React-Native project and tried to import it to Android Studio IDE. The problem is that the building process is failed and gives these two errors:

To resolve the first error, I changed the appcompat version to 27.0.2 in project level build.gradle file in which my previous native android apps built successfully. But using this API version the same error will be thrown. In the following the build.gradle files have been attached to see if something is wrong.

(build.gradle) --> project level    
    // Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.3.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}


ext {
    buildToolsVersion = "27.0.2"
    minSdkVersion = 16
    compileSdkVersion = 27
    targetSdkVersion = 27
    supportLibVersion = "27.0.2"
}

And here is module level build.gradle.

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

    defaultConfig {
        applicationId "com.sampleproj"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

How can I resolve these problems?

Answer 1

I found these steps to solve the problem.

1. Adding this line of code in project-level build.gradle to repositoreis section:

    maven { url "$rootDir/../node_modules/react-native/android" } 

2. The first step makes a successful building process but running on the emulator or physical device shows a red screen that states: Unable to load script from assets index.android.bundle . To address this follow the instructions .

3. To accomplish the second step you should downgrade react-native version from version 0.56 to 0.55.4 (if you use this version) as there is a bug in 0.56 version. How to!
4. If you encounter the babel-preset-react-native\\index.js" provided an invalid property of default... after performing the second step, just change the below line in your package.json of your project and then sync it using:

npm install

(package.json)

"babel-preset-react-native": "^4.0.0"

Not all steps are required for everyone, but as I encountered the errors this procedure help me to solve them.