How do I configure absolute paths for imports in TypeScript based React Native apps?

Requirement

// Meh
import config from '../../../../../../../config';

// Awesome!
import config from '@cuteapp/config';

How To

1. Add this babel plugin package

yarn add --dev babel-plugin-module-resolver

2. My babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        cwd: 'babelrc',
        extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],
        alias: {
          '@cuteapp': './app'
        }
      }
    ],
    'jest-hoist'
  ]
};

3. My tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es2015", "es2015.promise", "es2016.array.include", "dom"],
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@cuteapp/*": ["app/*/index", "app/*"]
    },
    "noEmit": true,
    "resolveJsonModule": true,
    "target": "esnext",
    "types": ["jest"]
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js"]
}

4. Restart the IDE.
5. That's it.

Summary:

The npm package babel-plugin-module-resolver is needed, as well as some configuration in tsconfig.json and babel.config.js

---

Step by step:

1. npm install babel-plugin-module-resolver (or yarn add babel-plugin-module-resolver)

2. tsconfig.json: Add "baseUrl": "." to compilerOptions

3. babel.config.js: Add a key named plugins with the following value:

[
    [
      'module-resolver',
      {
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.android.js',
          '.android.tsx',
          '.ios.js',
          '.ios.tsx'
        ],
        root: ['.']
      }
    ]
  ]

---

Complete configuration:

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "."
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.android.js',
          '.android.tsx',
          '.ios.js',
          '.ios.tsx'
        ],
        root: ['.']
      }
    ]
  ]
};

This is for a clean new project created using npx react-native init MyTestApp --template typescript on React Native version 0.60.5

For anyone who uses TypeScript and just wants to use import with absolute paths without aliases.

Assuming all of your code folders are inside of src.

Insert "baseUrl": "src" in compilerOptions object inside tsconfig.json.

Now you can use absolute paths in imports.