CODEWITHSUNDEEP
javascriptreact-nativeenvironment-variables
LuizfBrisighello
LuizfBrisighello

Reputation: 269

How can I use environment variables properly?

Im developing a white label app and I would like to know how can I use environment variables to generate specific color values and source images for different environments/builds.

Im using react-native-config to be able to manipulate/use env variables for my code specific builds.

//.env.fistapp
APP_BUILD=Environment-firstapp

LOGIN_LOGO_IMAGE=./images/1Logo.png

LOGIN_SOME_BOOL=true

LOGIN_BACKGROUND_COLOR=#333
LOGIN_SIMPLE_TEXT_COLOR=#FFF
LOGIN_TEXTINPUT_BACKGROUD_COLOR=#FFF
LOGIN_LOGIN_BUTTON_COLOR=#009933

For color values its working fine like this:

<View styles={background: ${Config.LOGIN_BACKGROUND_COLOR}}/>

For booleans I dont know the proper way to do it.. Env variables are always string so I guess the workaround is:

<Switch value={Config.LOGIN_SOME_BOOL === "true"}/>

But im having difficulties for source images. I get:

Invalid call at line 18: require(_reactNativeConfig.default.LOGIN_LOGO_IMAGE) at C:\Users\myuser\Desktop\myproject\whitelabel\node_modules\metro\src\JSTransformer\worker.js:318:19

I have tryed all this ways:

import Logo from Config.LOGIN_LOGO_IMAGE

import Logo from `${Config.LOGIN_LOGO_IMAGE}`

const Logo = Config.LOGIN_LOGO_IMAGE

<Image source={require(Config.LOGIN_LOGO_IMAGE)}/>

<Image source={{uri: require(Config.LOGIN_LOGO_IMAGE)}}/>

Upvotes: 1

Views: 148

Answers (1)

Marc Sloth Eastman
Marc Sloth Eastman

Reputation: 801

I think you need to put this string in quotes: LOGIN_LOGO_IMAGE="../../images/1Logo.png". As for the booleans, print out typeof(Config.LOGIN_SOME_BOOL) and if its a bool you need to do {Config.LOGIN_SOME_BOOL === true} (no quotes)

Upvotes: 1

Related Questions