How to Setup Path Aliases in a React Native app with Typescript

Pratap SharmaApril 26th, 20234 mins read

In this article we will learn how to set path alias in a react-native app built on typescript.

This solution work for React app as well.

Let us take a simple project structure below.

/Users/pratap/AvatarApp
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
├── src
|  ├── components
|  |  ├── avatars
|  |  |  ├── RoundAvatar.tsx
|  |  |  └── index.tsx
|  ├── index.tsx
|  └── screens
|     └── Profile
|        └── Profile.tsx
├── tsconfig.json
└── yarn.lock

If we want to import RoundAvatar component in the Profile.tsx screen. This is how the import statement will look like.

import { RoundAvatar } from "../../components/avatars";

The import from looks very long and difficult to understand. Let us try to import like this.

import { RoundAvatar } from "@components/avatars";

or more shorter

import { RoundAvatar } from "@avatars";

In order to achieve this we will have to update two files. tsconfig.json and babel.config.js.

tsconfig.json: This is for TypeScript which specifies the root files and the compiler options required to compile the project.
babel.config.js: Babel is a transpiler. Babel uses this config to manage how it should transpile.

Typescript Path Alias

Let us first set the baseUrl to ., which represents the root directory of the project. Every path in the tsconfig will be relative to what we provide in the baseUrl.

//tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      //We will have to add the same thing in babel.config.js
      "@components/*": ["src/components/*"],

      //exposing the exports of the avatars index file
      "@avatars": ["src/components/avatars/index"]
    }
    //other options
  }
  //other configs
}

After adding the above options in tsconfig.json, typescript will be able to parse

import { RoundAvatar } from "@components/avatars";
import { RoundAvatar } from "@avatars";

React Native Path Alias

Now, we need to address the issue of React Native path alias by providing the necessary information to the packager so that it can locate the required files accurately.

First of all, you need to install babel-plugin-module-resolver as a dev dependency.

yarn

$ yarn add -D babel-plugin-module-resolver

npm

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

We can now modify the babel.config.js file by incorporating the module-resolver plugin and specifying the directories that we want to use.

// babel.config.js

module.exports = {
  plugins: [
    [
      "module-resolver",
      {
        root: ["."],
        alias: {
          // This has to be mirrored in tsconfig.json
          components: "./src/components",
          avatars: "./src/components/avatars",
        },
      },
    ],
  ],
};

With the changes made, you are good to go! You can now use shorter imports, save time on typing, simplify refactoring, and improve code readability.

A useful tip: If you prefer using absolute paths instead of relative ones, but do not want to create an alias for every directory, you can include your root directory (e.g., @mb) in the alias configuration.

//tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      //We will have to add the same thing in babel.config.js
      "@mb/*": ["src/*"]
    }
    //other options
  }
  //other configs
}

// babel.config.js

module.exports = {
  plugins: [
    [
      "module-resolver",
      {
        root: ["."],
        alias: {
          // This has to be mirrored in tsconfig.json
          "^@mb/(.+)": "./src/\\1",
        },
      },
    ],
  ],
};

From now on, you can use imports like these:

import { RoundAvatar } from "@mb/components/avatars" as well.

Conclusion

To sum up, setting up path aliases in React Native can enhance the development experience by simplifying imports and improving code readability. This can be achieved using the babel-plugin-module-resolver and updating the babel configuration file, and adding the root directory to the alias configuration can further streamline import statements. By following these best practices, React Native projects can be made more organized and maintainable.

Learn More

Please let me know if there's anything else I can add or if there's any way to improve the post. Also, leave a comment if you have any feedback or suggestions.