React-native-config: Android. Got compiled but Config is undefined

[ruskid]

I got it installed and checked everything.
My MainApplication.java is like this.

protected List<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactNativeConfigPackage(),
...

The app is compiled, but Config is undefined
import Config from 'react-native-config'

[will-ockmore]

Having the same issue

[pedro]

Odd, what react-native version?

Can you folks share an app having this issue?

[ruskid]

RN. 0.32. I will try to send you some files today later.
Can you write me via email? [email protected]

[skellock]

Is this still an issue? I'd submitted a patch to react-native-config which allows a missing .env file. It was accepted and released and we've bumped ignite as well.

You might have to double check your react-native-config to unsure you've got the latest.

Thanks.

[skellock]

Bah. I had meant to comment on https://github.com/infinitered/ignite/issues/368 instead of this issue. I'll leave it there and this one as a shameful reminder to myself to never reply on my iPad again. 🔔 🔔 🔔

[designorant]

@ruskid @will-ockmore How did you installed it? Was it via react-native link or rnpm link alone by any chance? See: #34 for a potential cause and solution.

[ruskid]

I have the 2nd line present.
I did rnpm link and made sure everything is present as in README.
I've sent my sources to @pedro and waiting for his reply.

[ruskid]

settings.gradle

rootProject.name = 'startup'

include ':app'
include ':react-native-config'
project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-i18n'
project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-i18n/android')
include ':react-native-device-info'
project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
include ':react-native-image-crop-picker'
project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-crop-picker/android')
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')

build.gradle

apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

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,
 *
 *   // 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: []
 * ]
 */

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 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.startup"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
        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 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
            }
        }
    }
}

dependencies {
    compile project(':react-native-config')
    compile project(':react-native-fbsdk')
    compile project(':react-native-vector-icons')
    compile project(':react-native-i18n')
    compile project(':react-native-maps')
    compile project(':react-native-device-info')
    compile project(':react-native-image-crop-picker')
    compile project(':react-native-image-picker')
    compile ('com.google.android.gms:play-services-gcm:8.1.0') {
        force = true;
    }
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

// 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'
}

MainApplication.java

package com.startup;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

// 3rd party imports
import com.learnium.RNDeviceInfo.RNDeviceInfo;
import com.airbnb.android.react.maps.MapsPackage;
import com.i18n.reactnativei18n.ReactNativeI18n;
import com.oblador.vectoricons.VectorIconsPackage;
import com.reactnative.picker.PickerPackage;
//import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
import com.imagepicker.ImagePickerPackage;
import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

  protected static CallbackManager getCallbackManager() {
    return mCallbackManager;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    FacebookSdk.sdkInitialize(getApplicationContext());
    // If you want to use AppEventsLogger to log events.
    AppEventsLogger.activateApp(this);
  }

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactNativeConfigPackage(),
          new MapsPackage(),
          new RNDeviceInfo(),
          new ReactNativeI18n(),
          new VectorIconsPackage(),
          new PickerPackage(),
          //new ReactNativePushNotificationPackage(),
          new ImagePickerPackage(),
          new FBSDKPackage(mCallbackManager)
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

[maraujop]

Whenever this exception happens, it's usually because of one of the following reasons:

• You haven't set a resValue for build_config_package as explained here https://github.com/luggit/react-native-config#advanced-setup In your pasted code, I haven't seen it.
• You are importing Config incorrectly, DON'T do import { Config } from 'react-native-config instead DO import Config from 'react-native-config'
• Your .env file needs to be in the root of your project directory, usually where your index.js file is located.

You can see if react-native-config can access BuildConfig class with logcat:

adb logcat -s ReactNative

I've just checked it and this package works with RN 0.34.0 without problems.

In my opinion @luggit I would change Log.d("ReactNative" to Log.d("ReactNativeJS which can be easily seen with react-native log-android and would add a URL in the log pointing to how to set up build_config_package.

Cheers,
Miguel

[ruskid]

Hello @maraujop
I saw your points and already checked them before.

1. if you use applicationIdSuffix or applicationId that is different from the package name
2. I have import Config
3. ofc .env file in root directory.

This is some voodoo magic, I upgraded to RN 0.34.0 and recompiled with same code. And .env got loaded

Thanks for help anyway.

[AC-FTW]

Hello @maraujop

Like @ruskid, I went through your list of reasons and also updated to RN 0.34.0, but I am still seeing this problem (perhaps it's my disbelief in voodoo).

@pedro asked if someone could upload an app that shows this issue so I created a simple hello world type application and have attached it.

Thanks in advance for any help.

-AC

helloWorld.zip

[AC-FTW]

After re-visiting this problem, I discovered that the react-native link command was not adding this line to android/app/build.gradle:

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Once I added that everything went from undefined to the values in my .env file.

[pedro]

Ah! You rock, thanks for sharing :+1:

Is this what was missing for others too?

[ruskid]

I don't think so, because I added this manually

[marlonbrgomes]

I have the same config as @ruskid and have the .env file on project root, did the import Config from 'react-native-config' and Im getting the same error, Config is undefined :/

Edit:

react-native: 0.37
react-native-config: 0.1.2

[bitsal]

It doesn't work without

new ReactNativeConfigPackage()

for me.

Please update your README to mention this.

[stilllife00]

So, after much struggle, I've managed to make this work.
Here's a summary of what I did:

Link the library manually

Because react native link was failing (see https://github.com/facebook/react-native/issues/12216 and https://github.com/luggit/react-native-config/issues/80).
Here the steps:

settings.gradle
include ':react-native-config' project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

build.grade
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
not sure it matters but I moved this at the top of the file right after apply plugin
and under the debug { config add
resValue "string", "build_config_package", "com.myappname"

MainApplication.java
import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
and add
new ReactNativeConfigPackage()

Restart all

Meaning restarted the emulator, react native start and react native run-android

Please fix the link or add info for a manual linking for android in the readme.

[morksinaanab]

I had the same issue. In the end, I realized, I've set everything up fine, according to the readme, so @stilllife00 comment about restarting all got me thinking.

Restarting all did not help me. But as I'm building using the command line react react-native run-android, I changed tactic and also tried cleaning the project via Android Studio and then building via Android Studio. Then it worked.

So either cleaning the project and / or building it via Android helped me fix it. I see the values of the Config now in Android.

I suspect it was the cleaning that did the trick.

[matthamil]

I followed @stilllife00 's instructions and I had to add the following to build.gradle:

Add compile project(':react-native-config') to the dependencies

[1mike12]

my post link build.grade was missing apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle". It had everything else in @stilllife00 post. Adding this one line made it work.

react-native-cli: 2.0.1

[pedro]

Closing, it seems like the issue is the missing apply from: project()....

Too bad we can't automate that step in react-native link. I'll make the Android setup instructions more prominent.