Aapt errors when building release apk if using RNPaystack and React Navigation

[lordkiz]

@tolu360 As it stands, it is impossible to generate a release variant if using this react-native-paystack with react navigation.
This is because react-native-paystack requires having to set android.enableAapt2=true else you will get these errors:

ERROR: In <declare-styleable> ForegroundView, unable to find attribute foreground
ERROR: In <declare-styleable> ForegroundView, unable to find attribute foregroundGravity
ERROR: In <declare-styleable> ForegroundView, unable to find attribute foregroundInsidePadding

Meanwhile you will get this common error
arising from react navigation \android\app\build\intermediates\res\merged\release\drawable-hdpi\node_modules_reactnavigation_src_views_assets_backicon.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file.. if you have android.enableAapt2=true in your gradle.properties. (This temporary fix to this is changing to android.enableAapt2=false in gradle.properties)

react-native-paystack #9
react-navigation #3097

Any help will be greatly appreciated

[lordkiz]

I had to allow android.enableAapt2=false flag in my gradle.properties file. And changed the line in react-native-paystack's build.gradle from compile 'co.paystack.android:paystack:3.0.9' to compile 'co.paystack.android:paystack:3.0.7' . Essentially using a lower version of paystack-android before I was able to build a release apk.

[tolu360]

Hi @lordkiz, so it's a case of stock RN still shipping with v2.3.* of the Gradle Plugin, whereas the Paystack SDK want you to be on v3.* (and above) of the plugin. Is not necessarily a react-navigation type thing! RN would soon start shipping with v3 though, once this issue is sorted.

Be that as it may, one should still be able to use v3.* of the Gradle plugin (where AAPT2 is enabled by default) and manage to have a working release build. Once I have some time on my hands, I would see if I can reproduce your issues. In the meantime, the downside of dropping down to an older version of the Paystack SDK is inheriting bugs already fixed in the newer versions.

Do you care to share your android/build.gradle, android/app/build.gradle and android/gradle/wrapper/gradle-wrapper.properties files, if I can have a quick look-see (what they looked like before downgrading on Paystack SDK version)?

[lordkiz]

I get what you mean. Thanks.
Yes, it is possible to use a gradle v3.. And your app will work flawlessly on debug. I use v3.. But if you use the newer versions of react-navigation and react-native v0.50.* , you will not be able to build a release without disabling aapt2. As discussed here and continued here.

Here is my android.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'

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

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
          url "$rootDir/../node_modules/react-native/android"
        }
        maven { url 'https://maven.google.com' }
    }
}

android/app/build.gradle

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

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

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

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.2"

    defaultConfig {
        applicationId "com.xxx"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 3
        versionName "1.2"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
        manifestPlaceholders = [onesignal_app_id: xxxxxxxxxxxxxxxxxxx,
                                onesignal_google_project_number: xxxxxxxxxxxxxxxxxxxxxxx]
    
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            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
            }
        }
    }
}

repositories {
  mavenCentral() 
}

dependencies {
    compile project(':appcenter-crashes')
    compile project(':appcenter-analytics')
    compile project(':appcenter')
    compile project(':react-native-paystack') 
    compile project(':react-native-onesignal')
    compile project(':react-native-image-picker')
    compile project(':lottie-react-native')
    compile project(':react-native-linear-gradient')
    compile project(':react-native-vector-icons')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile 'com.facebook.android:facebook-android-sdk:4.22.1'
}

configurations.all {
    resolutionStrategy {
        force 'com.facebook.android:facebook-android-sdk:4.22.1'
    }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

and android/gradle/wrapper/gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

[steveamaza]

Hi @lordkiz this issue is mostly from React Navigation/React Native's implementation. AAPT2 is supposed to be enabled on Android. The old AAPT is deprecated.

I found a recent workaround for react native by replacing my node_modules/react_native/react.gradle file with

import org.apache.tools.ant.taskdefs.condition.Os

def config = project.hasProperty("react") ? project.react : [];

def cliPath = config.cliPath ?: "node_modules/react-native/local-cli/cli.js"
def bundleAssetName = config.bundleAssetName ?: "index.android.bundle"
def entryFile = config.entryFile ?: "index.android.js"
def bundleCommand = config.bundleCommand ?: "bundle"
def reactRoot = file(config.root ?: "../../")
def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"]
def bundleConfig = config.bundleConfig ? "${reactRoot}/${config.bundleConfig}" : null ;


gradle.projectsEvaluated {
    android.applicationVariants.all { def variant ->
        // Create variant and target names
        def targetName = variant.name.capitalize()
        def targetPath = variant.dirName

        // React js bundle directories
        def jsBundleDir = file("$buildDir/generated/assets/react/${targetPath}")
        def resourcesDir = file("$buildDir/generated/res/react/${targetPath}")

        def jsBundleFile = file("$jsBundleDir/$bundleAssetName")

        // Additional node and packager commandline arguments
        def nodeExecutableAndArgs = config.nodeExecutableAndArgs ?: ["node"]
        def extraPackagerArgs = config.extraPackagerArgs ?: []

        def currentBundleTask = tasks.create(
            name: "bundle${targetName}JsAndAssets",
            type: Exec) {
            group = "react"
            description = "bundle JS and assets for ${targetName}."

            // Create dirs if they are not there (e.g. the "clean" task just ran)
            doFirst {
                jsBundleDir.deleteDir()
                jsBundleDir.mkdirs()
                resourcesDir.deleteDir()
                resourcesDir.mkdirs()
            }

            doLast {
                def moveFunc = { resSuffix ->
                    File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
                    if (originalDir.exists()) {
                        File destDir = file("${resourcesDir}/drawable-${resSuffix}-v4")
                        ant.move(file: originalDir, tofile: destDir)
                    }
                }
                moveFunc.curry("ldpi").call()
                moveFunc.curry("mdpi").call()
                moveFunc.curry("hdpi").call()
                moveFunc.curry("xhdpi").call()
                moveFunc.curry("xxhdpi").call()
                moveFunc.curry("xxxhdpi").call()
            }

            // Set up inputs and outputs so gradle can cache the result
            inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
            outputs.dir jsBundleDir
            outputs.dir resourcesDir

            // Set up the call to the react-native cli
            workingDir reactRoot

            // Set up dev mode
            def devEnabled = !(config."devDisabledIn${targetName}"
                || targetName.toLowerCase().contains("release"))

            def extraArgs = extraPackagerArgs;

            if (bundleConfig) {
                extraArgs = extraArgs.clone()
                extraArgs.add("--config");
                extraArgs.add(bundleConfig);
            }

            if (Os.isFamily(Os.FAMILY_WINDOWS)) {
                commandLine("cmd", "/c", *nodeExecutableAndArgs, cliPath, bundleCommand, "--platform", "android", "--dev", "${devEnabled}",
                    "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraArgs)
            } else {
                commandLine(*nodeExecutableAndArgs, cliPath, bundleCommand, "--platform", "android", "--dev", "${devEnabled}",
                    "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraArgs)
            }

            enabled config."bundleIn${targetName}" ||
                config."bundleIn${variant.buildType.name.capitalize()}" ?:
                targetName.toLowerCase().contains("release")
        }

        // Expose a minimal interface on the application variant and the task itself:
        variant.ext.bundleJsAndAssets = currentBundleTask
        currentBundleTask.ext.generatedResFolders = files(resourcesDir).builtBy(currentBundleTask)
        currentBundleTask.ext.generatedAssetsFolders = files(jsBundleDir).builtBy(currentBundleTask)

        variant.registerGeneratedResFolders(currentBundleTask.generatedResFolders)
        variant.mergeResources.dependsOn(currentBundleTask)

        def resourcesDirConfigValue = config."resourcesDir${targetName}"
        if (resourcesDirConfigValue) {
            def currentCopyResTask = tasks.create(
                name: "copy${targetName}BundledResources",
                type: Copy) {
                group = "react"
                description = "copy bundled resources into custom location for ${targetName}."

                from resourcesDir
                into file(resourcesDirConfigValue)

                dependsOn(currentBundleTask)

                enabled currentBundleTask.enabled
            }

            variant.packageApplication.dependsOn(currentCopyResTask)
        }

        def currentAssetsCopyTask = tasks.create(
            name: "copy${targetName}BundledJs",
            type: Copy) {
            group = "react"
            description = "copy bundled JS into ${targetName}."

            from jsBundleDir
            into file(config."jsBundleDir${targetName}" ?:
                "$buildDir/intermediates/assets/${targetPath}")

            // mergeAssets must run first, as it clears the intermediates directory
            dependsOn(variant.mergeAssets)

            enabled currentBundleTask.enabled
        }

        variant.packageApplication.dependsOn(currentAssetsCopyTask)
    }
}

Courtesy of #17967 from @CFKevinRef (that should really be merged)

[dansmog]

Am still experiencing this error

[steveamaza]

@dansmog did you try my fix above? Better yet, what have you tried so far?

[dansmog]

@steveamaza I have tried the fix you mentioned, the one of changing the react.gradle, also the android.enableAapt2=true and also changing it to false, cleared my .gradle cache to, and it isnt working yet.

[SanchezQb]

@dansmog what's the error you're getting now? Because changing react.gradle worked for me

[tolu360]

If anyone still has issues assembling a release build, update to v3.2.0 of this lib and/or update RN to 0.57.0, if you cannot update RN yet, I added a workaround to the README