access environment variable in React-Native AndroidManifest.xml

Question

I'm new to React Native. The task at hand is to set my Google API key in AndroidManifest.xml without exposing it, when pushed to GitHub. I set up an environment variable called API_KEY, but however I want to access it in the .xml, I get an error when trying to spin up the dev server.

So far I tried:

android:value=${env.API_KEY}
android:value="${env.API_KEY}"
android:value="${API_KEY}"

Thank you!

DBencz · Accepted Answer · 2019-11-22 13:31:02Z

15

Based on the second comment (from kenmistry), the solution that worked for me was indeed to create a placeholder in build.gradle, but since, for whatever reason, configuring and referring a .env file did't work, I invoked my environment variables like so in build.gradle:

manifestPlaceholders = [API_KEY: "$System.env.API_KEY"]

and accessed it in the .xml as suggested by kenmistry:

android:value="${API_KEY}"

edited Nov 22, 2019 at 13:31

answered Nov 21, 2019 at 10:28

DBencz

1,3582 gold badges11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fanchen Bao Over a year ago

This works for me. I tried the accepted answer first, but $process.env.API_KEY threw an error Could not get unknown property 'process'.

kenmistry · Accepted Answer · 2019-11-20 00:45:48Z

10

assuming that you have defined the key in your .env file, you can set that up on build.gradle as manifestPlaceholders.

android {
    defaultConfig {
        manifestPlaceholders = [API_KEY: "$process.env.your_key"]
    }
    ...
}

on your AndroidManifest.xml,

android:value="${API_KEY}"

edited Nov 20, 2019 at 0:45

answered Nov 18, 2019 at 12:36

kenmistry

2,1731 gold badge24 silver badges31 bronze badges

6 Comments

DBencz Over a year ago

If I understand it right, now the key is in an other .gradle, still exposed in my repo. It should be nice to access environment variable instead.

Fapi Over a year ago

hey @kenmistry, I am working with react and I am reading several env files via:project.ext.envConfigFiles = [ release: ".env.prod", debug: ".env.dev", staging: ".env.stage"] - can I also read it from there? Somehow it tells me the value is "null" when I try.

kenmistry Over a year ago

@Fapi , how did you call it? like this - $process.env.prod.your_key

Fapi Over a year ago

I think I tried like this and also with $System

Facundo Colombier Over a year ago

note that there are more than one build.gradle files, this change should be done in android/app/build.gradle

|

IB3N · Accepted Answer · 2023-03-23 16:17:53Z

4

For anyone else that the above solutions aren't working for, I had to use this syntax in android/app/build.gradle under the android.defaultConfig section:

manifestPlaceholders = [MY_ENV_VAR:"${System.getenv("MY_ENV_VAR")}"]

and then in android/app/src/main/AndroidManifest.xml under the <manifest><application> section

<meta-data android:name="myEnvVar" android:value="${MY_ENV_VAR}" />

answered Mar 23, 2023 at 16:17

IB3N

992 silver badges9 bronze badges

Comments

fzzio · Accepted Answer · 2024-06-01 10:30:13Z

Another solution that works for me is:

Make sure that in the .env file is defined in the root of the project. Then:

Edit your android\app\build.gradle with this:

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

import com.android.build.gradle.internal.dsl.BaseAppModuleExtension

// Import dotenv and load the environment vars
project.ext.env = new Properties()
file('../../.env').withInputStream { project.ext.env.load(it) }

react {
    // React Native settings
}

android {
    // other code

    defaultConfig {
        // Use the loaded environment variable
        manifestPlaceholders = [MY_ENV_VAR: project.ext.env['MY_ENV_VAR']]
    }
}

And in your android\app\src\main\AndroidManifest.xml add this:

<meta-data android:name="myEnvVar" android:value="${MY_ENV_VAR}" />

Collectives™ on Stack Overflow

access environment variable in React-Native AndroidManifest.xml

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related