Cleaning up imports using module resolver in React Native

Hello, React Native Community!

During a recent interview, my interviewer said "I went through some of your code on Github, seems good and all but why aren't you using a module resolver? Do imports not get messy?"

I remember thinking "Oh this makes sense, why am I not doing this?", because coincidentally enough recently I started using Babel module resolver in a project I was doing for a client but not my own portfolio projects.

Why do I need another babel plugin?

So, the idea of a module resolver is to improve code readability and developer experience as it's easier to import your components. Also, it is very good for projects which are scaling fast.

Let's consider an example:

import Module from '../../../Module';

The above can be simplified into:

import Module from 'components/Module';

// similarly

import Module from '@components/Module';

And if you have configured an index.ts, it's like a cherry on top

import { Module } from '@components';

Getting started

yarn add --dev babel-plugin-module-resolver

# or if you use npm

npm install --save-dev babel-plugin-module-resolver

After installing the plugin we need to update babel.config.js (you can also use .babelrc) and add 'module-resolver' to the list of babel plugins.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@app/config': './app/config',
          '@app/context': './app/context',
          '@app/constants': './app/constants',
          '@app/layout': './app/layout',
          '@app/navigation': './app/navigation',
          '@app/screens': './app/screens',
          '@app/theme': './app/theme',
          '@app/utils': './app/utils',
        },
      },
    ],
  ],
};

• root specifies your project main directory. Usually, it is called 'app' or 'src'.
• extensions allows you to limit the plugin to specific file types.
• alias lets you specify all the folders you need shortcuts for your module imports.

The above example is from one of my projects. As you can see, we can easily configure this for any type of folder structure.

Now with the integration completed, let's now make sure our auto-completion and IntelliSense works as well.

If you are working with typescript then add the following fields to your tsconfig.json (Isn't typescript just awesome?)

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "*": ["./app/*"],
      "@app/utils": ["./utils/*"],
      "@components": ["./components/*"]
    }
   ...
  }
}

Or, if you're rocking javascript just simply add a jsconfig.json to your project and add the above fields so you can still get auto-completion.

• Running the project

After setting up the plugin, we now need to make sure it's working. Before you start changing your imports we need to do the following:

• Cleaning build folders for android and ios

rm -rf ios/build android/app/build

• Resetting cache for npm or yarn

yarn start -c

# or if you use npm

npm start --reset-cache

Now you should be able to build your project and start changing the import.

watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start --reset-cache

Hope this article was insightful and helped you improve code readability and the experience for you and your team.

Happy Coding! 🎉