Improving your React Native code using Path Aliases

When we develop an application with many folders the import paths are often too large and this affects the readability of your code as per the example below:

import Input from '../../../src/components/Input';
import HomeSvg from '../../../src/assets/home.svg';

To solve this problem we will have to make some settings:

1º Step: Libs Install

• Install metro-react-native-babel-preset and babel-plugin-module-resolver as devDependencies

npm install metro-react-native-babel-preset --save-dev
yarn add metro-react-native-babel-preset -D

npm install babel-plugin-module-resolver --save-dev
yarn add babel-plugin-module-resolver -D

2º Step: Babel Configuration

• alias: In will have the paths and the name that will be used when calling the specified path.

• extensions: Extensions to the files that will be used
  

module.exports = function(api) {
  api.cache(true);
   return {
     presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
     plugins: [
       "module-resolver",
       {
         alias: {
           // This needs to be mirroned in tsconfig.json/jsconfig.json
          components: "./src/components",
          svg: "./src/assets",
         },
         extensions: ['.js', '.jsx', '.tsx'],
       },
     ],
   };
};

3º Step: tsconfig/jsconfig configuration

• Access the tsconfig.json or jsconfig.json file

• If neither of these files exist, create them in the project root

• paths: Add the same paths added in babel.config.js, if the called folder does not have an index calling all files it is necessary to put "/*"

• baseUrl: Tell the typescript where to start importing
  

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // This needs to be mirrored in babel.config.js
      "components": ["./src/components"],
      "svg/*": ["src/assets/*"],
    }
  },
  "extends": "expo/tsconfig.base"
}

Final Result

import Input from 'components/Input';
import HomeSvg from 'svg/home.svg';