HELP WANTED - clarify react-native usage

[brigand]

We've had multiple issues with people specifying both the plugins array and the env plugins array with react-native. I'm not sure how to clearly express this.

I took a first attempt at it in #112, but it needs some more work.

Any ideas or PRs would be much appreciated.

[juddey]

Hey @brigand, here's a config with a babel.config.js and the latest version of React-Native (0.57).
RN 56+ uses webpack 4 so I wonder if this renders the "env plugins array" redundant now...? I've never heard of the 'env plugins array' and I've been doing RN for about a year. Anyway, this works a treat for me.

I'll PR something up with the below if I haven't misunderstood the problem. Let me know.

    plugins: [
      [
        'babel-plugin-root-import',
        {
          paths: [
            {
              rootPathPrefix: '~',
              rootPathSuffix: 'src/'
            },
            {
              rootPathPrefix: '#',
              rootPathSuffix: 'Tests/'
            }
          ]
        }
    ]
]

[brigand]

Babel 6 had a special way to define config for different NODE_ENV values within a JSON file. If react-native is on Babel 7 (where the babel.config.js file was introduced), I'm good with just giving Babel 7 instructions.

Is there any other babel-related code in your project, or conditionals in the babel.config.js file?

[juddey]

Heres my full babel.config.js:

No conditionals and just the couple of plugins you see at the bottom of the plugins array.

module.exports = function (api) {
  api.cache(true)
  return {
    presets: [
      'module:metro-react-native-babel-preset',
      'module:react-native-dotenv',
      '@lingui/babel-preset-react'
    ],
    plugins: [
      [
        'babel-plugin-root-import',
        {
          paths: [
            {
              rootPathPrefix: '~',
              rootPathSuffix: 'src/'
            },
            {
              rootPathPrefix: '#',
              rootPathSuffix: 'Tests/'
            }
          ]
        }
      ],
      ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
      'macros'
    ]
  }
}

[brigand]

@juddey thanks for the help. Updated the README.

[juddey]

@brigand No probs! You beat me to the PR though. 😄 Have a great day!

[joshuapinter]

We switched to using babel-plugin-module-resolve instead.

I have it working just fine on React Native 0.56.1:

package.json

"devDependencies": {
  "babel-plugin-module-resolver": "3.2.0"
}

.babelrc

{
  "plugins": [
    [ "module-resolver", { "root": ["./src"] } ]
  ]
}

index.android.js

import Constants from "Constants";