Babel module resolver and Babel presets for React Native 0.59.x

With the recent launch of React Native 0.59, some extra configurations came with like the metro.config.js and the babel.config.js.

We used to configure our React Native projects with babel-preset-react-native but since is incompatible with Babel 7 then a new package arrived, metro-react-native-babel-preset. And why metro? Because Metro is the new Javascript bundler for React Native from Facebook.

So, if you start a new project with RN 0.59.x you won’t need to configure any extra steps for the presets but for babel-plugin-module-resolver, you should use the following configuration.

File: babel.config.js (the default one)

1. Install the plugin with yarn add babel-plugin-module-resolver
2. Add the plugins block to the file

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        root: ["./src/"],
        alias: {
          "assets": "./src/assets", // optional
          "components": "./src/components", // optional
          "containers": "./src/containers", // optional
          "styles": "./src/assets/styles", // optional
          "images": "./src/assets/images" // optional
        }
      }
    ]
  ]
};

Now you are ready to use styles/utils/colors.js instead ../../../styles/utils/colors.js