How can I use environment variables properly?

How to / Third Party Tooling
1

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). I have tryed in all this ways:

import Logo from Config.LOGIN_LOGO_IMAGE

import Logo from `${Config.LOGIN_LOGO_IMAGE}`

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

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