DEV Community

Cover image for Absolute imports in React Native
Ian Felix
Ian Felix

Posted on

Absolute imports in React Native

This is a short guide on how to use absolute imports in React Native.

Absolute imports

The absolute imports are a feature that was introduced in ES2020. It allows you to import modules using an absolute path instead of a relative path.

For example, if you have a file called App.js in the src folder, you can import a module called utils.js using the following code:

import { sum } from 'src/utils';
Enter fullscreen mode Exit fullscreen mode

This is a simple example, but it can be very useful when you have a complex project with many files and folders.

How to use absolute imports in React Native

To use absolute imports in React Native, you need to install the babel-plugin-module-resolver package.

yarn add -D babel-plugin-module-resolver
Enter fullscreen mode Exit fullscreen mode

After installing the package, you need to configure it in the babel.config.js file.

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '~/assets': './src/assets',
          '~/contexts': './src/contexts',
          '~/screens': './src/screens',
          '~/styles': './src/styles',
          '~/routes': './src/routes',
          '~/services': './src/services',
          '~/hooks': './src/hooks',
          '~/shared': './src/shared',
        },
      },
    ],
  ],
};
Enter fullscreen mode Exit fullscreen mode

The root property is used to define the root folder of the project. In this case, it is the src folder.

The alias property is used to define the aliases that will be used in the imports. In this case, I defined the following aliases:

  • ~/assets: ./src/assets
  • ~/contexts: ./src/contexts
  • ~/screens: ./src/screens

The aliases are used to import modules using the ~ character. For example, if you want to import the App.js file in the screens folder, you can use the following code:

import App from '~/screens/App';
Enter fullscreen mode Exit fullscreen mode

If you are using Typescript, you will need to add the following code to the tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

It is important to note that the baseUrl property must be the same as the root property in the babel.config.js file.

Now you will be able to use absolute imports in your React Native project.

Thank you for reading this article.
If you enjoy this article, please upvote and comment.

Follow me on:

Top comments (2)

Collapse
 
jmquilario profile image
jmquilario

~/screens/Home could not be found within the project or in these directories:
didn't work in typescript

Collapse
 
ianfelix profile image
Ian Felix

Without code, I can't help you. Did you follow all the steps above?