Setting environment variable in react-native

Question

I am using react-native to build a cross-platform app  but I do not know how to set the environment variable so that I can have different constants for different environments   Example   development     BASE URL        API KEY      staging     BASE URL        API KEY      production    BASE URL        API KEY

User · Answer

I use babel-plugin-transform-inline-environment-variables   What I did was put a configuration files within S3 with my different environments   s3   example-bucket dev-env sh s3   example-bucket prod-env sh s3   example-bucket stage-env sh   EACH env file   FIRSTENV FIRSTVALUE SECONDENV SECONDVALUE   Afterwards  I added a new script in my package json that runs a script for bundling  if     ENV      production    then   eval   aws s3 cp s3   example-bucket prod-env sh -   sed  s   export     elif     ENV      staging    then   eval   aws s3 cp s3   example-bucket stage-env sh -   sed  s   export     else   eval   aws s3 cp s3   example-bucket development-env sh -   sed  s   export     fi  react-native start   Within your app you will probably have a config file that has   const FIRSTENV   process env  FIRSTENV   const SECONDENV   process env  SECONDENV     which will be replaced by babel to   const FIRSTENV    FIRSTVALUE  const SECONDENV    SECONDVALUE    REMEMBER you have to use process env  STRING   NOT process env STRING or it won t convert properly

User · Answer

Step 1  Create separate component like this         Component name   pagebase js Step 2  Inside this use code this         export const BASE URL    http   192 168 10 10 4848        export const API KEY    key token     Step 3  Use it in any component  for using it first import this component then use it          Import it and use it            import   as base from    pagebase            base BASE URL         base API KEY

User · Answer

The simplest  not the best or ideal  solution I found was to use react-native-dotenv  You simply add the  react-native-dotenv  preset to your  babelrc file at the project root like so        presets     react-native    react-native-dotenv       Create a  env file and add properties   echo  SOMETHING anything   gt   env   Then in your project  JS    import   SOMETHING   from  react-native-dotenv  console log SOMETHING      anything

User · Answer

I think something like the following library could help you out to solve the missing bit of the puzzle  the getPlatform   function    https   github com joeferraro react-native-env  const EnvironmentManager   require  react-native-env        read an environment variable from React Native EnvironmentManager get  SOME VARIABLE      then val   gt        console log  value of SOME VARIABLE is     val            catch err   gt        console error  womp womp     err message           The only problem I see with this  that it s async code  There is a pull request to support getSync  Check it out too    https   github com joeferraro react-native-env pull 9

User · Answer

The specific method used to set environment variables will vary by CI service  build approach  platform and tools you re using   If you re using Buddybuild for CI to build an app and manage environment variables  and you need access to config from JS  create a env js example with keys  with empty string values  for check-in to source control  and use Buddybuild to produce an env js file at build time in the post-clone step  hiding the file contents from the build logs  like so      usr bin env bash  ENVJS FILE   BUDDYBUILD WORKSPACE env js     Echo what s happening to the build logs echo Creating environment config file    Create  env js  file in project root touch  ENVJS FILE    Write environment config to file  hiding from build logs tee  ENVJS FILE  gt   dev null  lt  lt EOF module exports       AUTH0 CLIENT ID    AUTH0 CLIENT ID     AUTH0 DOMAIN    AUTH0 DOMAIN    EOF   Tip  Don t forget to add env js to  gitignore so config and secrets aren t checked into source control accidentally during development   You can then manage how the file gets written using the Buddybuild variables like BUDDYBUILD VARIANTS  for instance  to gain greater control over how your config is produced at build time

User · Answer

In my opinion the best option is to use react-native-config  It supports 12 factor    I found this package extremely useful  You can set multiple environments  e g  development  staging  production   In case of Android  variables are available also in Java classes  gradle  AndroidManifest xml etc  In case of iOS  variables are available also in Obj-C classes  Info plist   You just create files like    env development  env staging  env production   You fill these files with key  values like  API URL https   myapi com GOOGLE MAPS API KEY abcdefgh   and then just use it   import Config from  react-native-config   Config API URL      https   myapi com  Config GOOGLE MAPS API KEY      abcdefgh    If you want to use different environments  you basically set ENVFILE variable like this   ENVFILE  env staging react-native run-android   or for assembling app for production  android in my case    cd android  amp  amp  ENVFILE  env production   gradlew assembleRelease

User · Answer

you can also have different env scripts  production env sh development env sh production env sh  And then source them in when starting to work  which is just tied to an alias  so all the sh file has is export for each env variable   export SOME VAR 1234 export SOME OTHER abc   And then adding babel-plugin-transform-inline-environment-variables will allow access them in the code   export const SOME VAR   string   process env SOME VAR  export const SOME OTHER   string   process env SOME OTHER

User · Answer

chapinkapa s answer is good  An approach that I have taken since Mobile Center does not support environment variables  is to expose build configuration through a native module   On android       Override     public Map lt String  Object gt  getConstants             final Map lt String  Object gt  constants   new HashMap lt  gt             String buildConfig   BuildConfig BUILD TYPE toLowerCase            constants put  ENVIRONMENT   buildConfig           return constants           or on ios     override func constantsToExport   - gt   String  Any            debug  staging   release        on android  I can tell the build config used  but here I use bundle name     let STAGING    staging      let DEBUG    debug       var environment    release      if let bundleIdentifier  String   Bundle main bundleIdentifier         if  bundleIdentifier lowercased   hasSuffix STAGING             environment   STAGING         else if  bundleIdentifier lowercased   hasSuffix DEBUG            environment   DEBUG                    return   ENVIRONMENT   environment        You can read the build config synchronously and decide in Javascript how you re going to behave

User · Answer

It is possible to access the variables with process env blabla instead of process env  blabla    I recently made it work and commented on how I did it on an issue on GitHub because I had some problems with cache based on the accepted answer  Here is the issue

User · Answer

For latest RN versions  you can use this native module  https   github com luggit react-native-config

User · Answer

i have created a pre build script for the same problem because i need some differents api endpoints for the differents environments  const fs   require  fs    let endPoint  if  process env MY ENV      dev       endPoint    http   my-api-dev api v1    else if  process env MY ENV      test       endPoint    http   127 0 0 1 7001    else     endPoint    http   my-api-pro api v1     let template     export default     API URL     endPoint      DEVICE FINGERPRINT  Math random   toString 36  slice 2       fs writeFile    src constants config js   template  function  err      if  err        return console log err         console log  Configuration file has generated        And i have created a custom npm run scripts to execute react-native run    My package-json    scripts          start-ios    node config-generator js  amp  amp  react-native run-ios        build-ios    node config-generator js  amp  amp  react-native run-ios --configuration Release        start-android    node config-generator js  amp  amp  react-native run-android        build-android    node config-generator js  amp  amp  cd android   amp  amp    gradlew assembleRelease               Then in my services components simply import the auto generated file   import config from     constants config   fetch    config API URL  login   params

User · Answer

If you are using Expo there are 2 ways to do this according to the docs https   docs expo io guides environment-variables  Method  1 - Using the  extra prop in the app manifest  app json   In your app json file     expo         quot slug quot    quot my-app quot        quot name quot    quot My App quot        quot version quot    quot 0 10 0 quot        quot extra quot            quot myVariable quot    quot foo quot               Then to access the data on your code  i e  App js  simply import expo-constants  import Constants from  expo-constants    export const Sample    props    gt       lt View gt       lt Text gt  Constants manifest extra myVariable  lt  Text gt     lt  View gt      This option is a good built-in option that doesn t require any other package to be installed  Method  2 - Using Babel to  quot replace quot  variables  This is the method you would likely need especially if you are using a bare workflow  The other answers already mentioned how to implement this using babel-plugin-transform-inline-environment-variables  but I will leave a link here to the official docs to how to implement it  https   docs expo io guides environment-variables  using-babel-to-replace-variables

User · Answer

I used the   DEV   polyfill that is built into react-native in order to solve this problem  It is automatically set to true so long as you are not building react native for production    E g       vars js  let url  publicKey  if    DEV        url         publicKey         else     url         publicKey          export  url  publicKey    Then just import  url  from     vars and you ll always get the correct one  Unfortunately  this wont work if you want more than two environments  but its easy and doesn t involve adding more dependencies to your project

User · Answer

React native does not have the concept of global variables  It enforces modular scope strictly  in order to promote component modularity and reusability   Sometimes  though  you need components to be aware of their environment   In this case it s very simple to define an Environment module which components can then call to get environment variables  for example   environment js  var  Environments         production    BASE URL      API KEY           staging       BASE URL      API KEY           development   BASE URL      API KEY          function getEnvironment            Insert logic here to get the current platform  e g  staging  production  etc      var platform   getPlatform              now return the correct environment     return  Environments platform     var Environment   getEnvironment   module exports   Environment   my-component js  var Environment   require    environment js       somewhere in your code    var url   Environment BASE URL   This creates a singleton environment which can be accessed from anywhere inside the scope of your app   You have to explicitly require      the module from any components that use Environment variables  but that is a good thing

User · Answer

Instead of hard-coding your app constants and doing a switch on the environment  I ll explain how to do that in a moment   I suggest using the twelve factor suggestion of having your build process define your BASE URL and your API KEY   To answer how to expose your environment to react-native  I suggest using Babel s babel-plugin-transform-inline-environment-variables   To get this working you need to download the plugin and then you will need to setup a  babelrc and it should look something like this        presets     react-native       plugins          transform-inline-environment-variables          And so if you transpile your react-native code by running API KEY my-app-id react-native bundle  or start  run-ios  or run-android  then all you have to do is have your code look like this   const apiKey   process env  API KEY      And then Babel will replace that with   const apiKey    my-app-id     Hope this helps

User · Answer

Source  From what I ve found  it looks like by default  it s only possible to do production and development configs  no staging or other environments      is that right  Right now  I ve been using a environment js file that can be used to detect expo release channels and change the variables returned based on that  but for building  I need to update the non- DEV variable returned to be either staging or prod  import   Constants   from  expo   import   Platform   from  react-native   const localhost   Platform OS      ios     http   localhost 4000      http   10 0 2 2 4000    const ENV       dev        apiUrl  localhost         staging        apiUrl   https   your-staging-api-url-here com          prod        apiUrl   https   your-prod-api-url-here com          const getEnvVars    env   Constants manifest releaseChannel    gt         What is   DEV          This variable is set to true when react-native is running in Dev mode         DEV   is true when run locally  but false when published    if    DEV          return ENV dev      else          When publishing to production  change this to  ENV prod  before running an  expo build      return ENV staging        export default getEnvVars   Alternatives does anyone have experience using react-native-dotenv for projects built with expo  I d love to hear your thoughts https   github com goatandsheep react-native-dotenv

[react-native] Setting environment variable in react-native?

Examples related to react-native