DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Andres Urdaneta
Andres Urdaneta

Posted on

Stop using relative paths in your React Native imports. Use Aliases instead.

Use Aliases in your imports with Babel

Instead of doing this in your imports i.e:

import Component from '../../../components/shared/Header';

You could do something like this from anywhere in your project i.e:

import Component from 'components/shared/Header';

Or you could even go as deep as you want i.e:

import Component from '@/shared/Header';

You get the point... no more relative paths ('../../../../../../') to import any of your components.

How?

  • Install required dependencies
npm i babel-plugin-module-resolver metro-react-native-babel-preset
Enter fullscreen mode Exit fullscreen mode
  • Head over to your babel.config.js file in your project root directory. (If it doesn't exist, create it)

  • Add the module-resolver plugin to your plugins array like this:

module.exports = {
    presets: ['module:metro-react-native-babel-preset']
    plugins: [
        [
            'module-resolver',
            {
                root: ['.'],
                extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
                alias: {
                    '@': './src/components',
                    'constants': './src/constants',
                    '##': './src/examples',
                },
            },
        ]
    ]
};
Enter fullscreen mode Exit fullscreen mode

Make sure to provide the path you want to reference with an alias, and the alias name itself.

According to the example above now you're able to import files or modules like this

import MyComponent from '@/MyComponent.js'
import MyConstantFile from 'constants/myConstant.js'
import MyExample from '##/MyExample.js'
Enter fullscreen mode Exit fullscreen mode

I would love to engage with other developers like you. Get in touch on Twitter! @dev_astador

Top comments (4)

Collapse
 
enchance profile image
enchance

This article is incomplete for a dev post. What are the pros and cons of this?

Collapse
 
madebyaaron profile image
Aaron Moore

I disagree, the core benefit of using aliases is covered at the beginning.

Collapse
 
joorce profile image
Jose Ortega • Edited on

Maybe the core benefit is explained but what about the main drawback.
Everything has pros and cons

Thread Thread
 
dev_astador profile image
Andres Urdaneta Author

I'm late to the party, but I've seen this post have had good traction. In order to answer this for people that might be reading this in the future and want an opinion on this:

You have to try it to see if you like using aliases instead of relative paths in your imports. I particularly like it, but I wouldn't do it for every project. There are two downsides with this approach for me:

  1. You have to configure it. And you need to come up with a convention for your import shortcuts. And you may change your mind along the way about an import shortcut and that'll need refactor. Is a task of -5min, but either way, it takes time.
  2. You loose autocompletion.

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!