crtxdmp.

A collection of ideas, snippets and other things.


Use typescript path alias with react native and expo

yarn add --dev babel-plugin-module-resolver
File: tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@App/*": [
        "./src/app/*"
      ],
      "@Domain/*": [
        "./src/domain/*"
      ],
      "@Framework/*": [
        "./src/framework/*"
      ],
      "@Ui/*": [
        "./src/ui/*"
      ]
    }
  }
}
File: babel.config.js
const tsconfig = require('./tsconfig.json');
let rawAlias   = tsconfig.compilerOptions.paths;
let alias      = {};

for (let x in rawAlias) {
    alias[x.replace('/*', '')] = rawAlias[x].map(
        p => p.replace('/*', ''));
}

module.exports = function(api) {
    api.cache(true);

    return {
        presets: ['babel-preset-expo'],
        plugins: [
            [
                'module-resolver',
                {
                    root: ['./'],
                    extensions: [
                        '.ios.js',
                        '.android.js',
                        '.js',
                        '.ts',
                        '.tsx',
                        '.json',
                    ],
                    alias,
                },
            ],
        ],
    };
};

, , — Jun 8, 2021