Enable customizing the root directory (/app)

[PiotrekPKP]

Summary

expo-router package only loads pages that are directly in the /app directory.

Many projects end up having many directories (like /types, /utils, etc.) and managing them is easier when you put your app's code in /src directory.

That's why I think supporting /src/app directory for pages is really important - eg. see NextJS, it allows you to use /src/pages structure.

Minimal reproducible example

https://github.com/PiotrekPKP/expo-router-test

This should work and not show the default router layout ^

[juliusmarminge]

+1 Definetely needed.

[JoshuaAmaju]

It also makes import aliasing difficult, I had to resort to regex for the babel module

[poptocrack]

It should indeed be supported. But in the meantime you could still split screens and other files into two separate folders
(which might not be optimal depending on your workflow)

/appwith all your routing
/srcwith /types /utils and so on.

You can easily make absolute imports by adding something like that in tsconfig.json

...
"compilerOptions": {
    "baseUrl": "src",
    "strict": true,
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@screens/*": ["screens/*"],
      "@services/*": ["services/*"],
      "@interfaces/*": ["interfaces/*"],
      "@navigation/*": ["navigation/*"],
      "@constants/*": ["constants/*"],
      "@assets/*": ["assets/*"],
      "@hooks/*": ["hooks/*"],
      "@stores/*": ["stores/*"],
      "@api/*": ["api/*"],
      "@atoms/*": ["atoms/*"],
    },

And this in babel.config.js

      "@babel/plugin-proposal-export-namespace-from",
      "react-native-reanimated/plugin",
      require.resolve("expo-router/babel"),
      [
        require.resolve('babel-plugin-module-resolver'),
        {
          root: '.',
          alias: {
            '@navigation': './src/navigation',
            '@components': './src/components',
            '@screens': './src/screens',
            '@interfaces': './src/interfaces',
            '@services': './src/services',
            '@constants': './src/constants',
            '@assets': './src/assets',
            '@hooks': './src/hooks',
            '@stores': './src/stores',
            '@api': './src/api',
            '@atoms': './src/atoms',
            '@utils': './src/utils',
          },
        },
      ],
    ],

[Akronae]

This is what I did, but it definitely feels nasty 🤮

[michaeloliverx]

It would be great if this was a first class feature, the latest version of create-next-app even has a --src-dir option.

[JoshuaAmaju]

Does expo-router treat files in the /app directory that have a default export to be routes? it'd be great if routes are differentiated by using a .page.tsx so that we don't have to move non route files far away from where they're used.

[zolero]

This is just something very painful to see that expo router doesn't support it. In the end what exactly is expo router for anyways if you already have full support with Stack Navigator. I mean come on. I get bug into bug with this library.

[hubastard]

Here's the solution that I've been using for my current project which require just 2 small changes to the initial Getting Started setup:

Step 1.

You have to set an environment variable that expo-router uses internally to locate the app folder.

In your babel.config.js do this:

module.exports = function(api) {
  api.cache(true);
  
  // Add the line below (this path is relative from `node_modules/expo-router`)
  process.env.EXPO_ROUTER_APP_ROOT = "../../src/app";
  
  return {
    ....
 }

Step 2.

In the root index.js file, instead of doing import "expo-router/entry"; do this:

import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

// Must be exported or Fast Refresh won't update the context
export function App() {
  const ctx = require.context("./src/app");
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

Step 3:

Enjoy 🥳

[zolero]

Thanks @hubastard! I'll test it out today.

[Akronae]

Works fine!
Dont forget to

yarn add -D @types/webpack-env

[Akronae]

Any idea on how to make hot reload work with this fix?

[EvanBacon]

Expo Router v2 supports src/app out of the box. Please don't use EXPO_ROUTER_APP_ROOT manually. Using the first-class support will ensure typed routes and static rendering work as expected.