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"]
}

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 ^-^