0

I'm working on a project using both react-web and react-native(mixed app). I was able to set environment variables using cross-env on web, but this seems not working with react-native.

Meaning:

  1. npm script cross-env NODE_ENV=development BABEL_ENV=development_web webpack-dev-server --hot --progress --config build/webpack.config.dev.js works fine.

  2. but cross-env NODE_ENV=development BABEL_ENV=development_rn && react-native run-ios won't work!

I got two different BABEL_ENV env settings for .babelrc:

{
  "env": {
    "development_web": {
      "presets": ["react", "es2015", "stage-0"],
      "plugins": [
        [
          "react-transform",
          {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": ["react"],
                "locals": ["module"]
              }, {
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
          }
        ],
        ["import", { "style": "css", "libraryName": "antd-mobile" }],
        ["transform-decorators-legacy"]
      ]
    },
    "development_rn": {
      "presets": ["react-native"],
      "plugins": [["import", { "libraryName": "antd-mobile" }]]
    },
  }
}

How can I appoint NODE_ENV/BABEL_ENV to development_rn for react native?

Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
Kim
  • 5,045
  • 6
  • 38
  • 60

1 Answers1

1

In the two scripts you're not just replacing the command to run (and its options), webpack-dev-server with react-native, but you changed it to run two different commands by using &&. cross-env only applies the environment variables to the immediate command, which in your case happens to do nothing at all, as there is no command besides the environment variables (see also cross-env - Gotchas).

The react-native script should be:

cross-env NODE_ENV=development BABEL_ENV=development_rn react-native run-ios
Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
  • I tried `cross-env NODE_ENV=development BABEL_ENV=development_rn npm run test`, and test script is: `echo NODE_ENV=$NODE_ENV BABEL_ENV=$BABEL_ENV` it works fine, the echo result is correct. But when I change test script to `react-native run-ios`, in the react-native app they return `process.env.NODE_ENV=nothing` and `process.env.BABEL_ENV=development`. Is that mean environment variable settings are not working in react-native? – Kim May 03 '17 at 03:36
  • 1
    There is an [open issue #8723](https://github.com/facebook/react-native/issues/8723) for `BABEL_ENV`. As far as using environment variables in your react native code you might want to have a look at [Setting environment variable in react-native?](https://stackoverflow.com/questions/33117227/setting-environment-variable-in-react-native), which should explain why they have the default values, but that does not solve the babel issue. – Michael Jungo May 03 '17 at 13:51