Using Absolute Paths in React Native

Expectation

// Hmmm
import {add} from '../../../../../../../utils';

// Awesome!
import {add} from 'utils';

How ?

Step 1: Install babel-plugin-module-resolver

npm install --save-dev babel-plugin-module-resolver
// or
yarn add --dev babel-plugin-module-resolver

Step 2: Add the following code to babel.config.js file.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        root: ["./src"],
      }
    ],
  ]
};

Step 3: Create file jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
    }
  }
}