Expo - Alias path example

readme.md

IMPORTANT EDIT - 5th November 2023

This gist was posted several years ago, and it worked back then. Before stating "this doesn't work", make sure you check the comments below the gist as others may have provided more recent instructions for more recent versions of Expo.

Original Content

These 2 files show how to correctly setup an Expo project to use alias paths with typescript.

Where you might import a component like this:

import MyComponent from "../../../components/path/to/my/component"

You can instead use:

import MyComponent from "@Components/path/to/my/component"

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["@babel/plugin-transform-flow-strip-types"],
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }],
      ["module-resolver", {
        "alias": {
          "@Navigation": "./src/navigation",
          "@Components": "./src/components",
          "@Screens": "./src/screens",
          "@Stores": "./src/stores",
          "@Assets": "./assets"
        },
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx",
        ]
      }],
    ]
  };
};

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "noEmit": true,
    "target": "es6",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@Navigation/*": ["src/navigation/*"],
      "@Components/*": ["src/components/*"],
      "@Screens/*": ["src/screens/*"],
      "@Stores/*": ["src/stores/*"],
      "@Assets/*": ["assets/*"]
    }
  },
  "exclude": ["node_modules"]
}

In sdk 49 add:
{ "expo": { "experiments": { "tsconfigPaths": true } } }

where will this be added

I have the same question

@solomonolatunji, @Dalex19, you need to add it to your app.json

@solomonolatunji, @Dalex19, you need to add it to your app.json

Thanks

"tsconfigPaths": true }

thanks

Edit

All Path Alias configs in tsconfig.json must be inside the compilerOptions section

In Expo SDK 49 just follow these steps from docs: https://docs.expo.dev/guides/typescript/#path-aliases

tscofig.json

"compilerOptions": {
  "strict": true,
  "baseUrl": ".",
  "paths": {
    "@/*": ["app/src/*"] // If you're only using the "src" folder use: "src/*"
  }
},

app.json

"experiments": {
  "tsconfigPaths": true
 }

Importing your components

import { Groups } from "@/screens/Groups";

In this case, there is no need to install babel-plugin-module-resolver module

Thanks @Alan-Graton I had missed the part about setting "tsconfigPaths": true in the Expo documentation!

You're welcome ^-^ @pauldcollins

what if don't have tsconfig.json file ?

what if don't have tsconfig.json file ?

If you're not using typescript in your project you can just create a jsconfig.json file and follow the same steps ^-^