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