expo-router 1.4.3 → 1.5.0

package/_entry.tsx

@@ -9,7 +9,13 @@ import { getNavigationConfig } from "./src/getLinkingConfig";
 import { getRoutes } from "./src/getRoutes";
 import { loadStaticParamsAsync } from "./src/loadStaticParamsAsync";
 
-export const ctx = require.context(process.env.EXPO_ROUTER_APP_ROOT!);
+export const ctx = require.context(
+  process.env.EXPO_ROUTER_APP_ROOT!,
+  true,
+  /.*/,
+  // @ts-expect-error
+  process.env.EXPO_ROUTER_IMPORT_MODE!
+);
 
 // Must be exported or Fast Refresh won't update the context >:[
 export default function ExpoRouterRoot() {

package/babel.js

@@ -17,6 +17,46 @@ function getExpoAppManifest(projectRoot) {
   return JSON.stringify(exp);
 }
 
+let config;
+
+function getConfigMemo(projectRoot) {
+  if (!config) {
+    config = getConfig(projectRoot);
+  }
+  return config;
+}
+
+function getExpoRouterImportMode(projectRoot, platform) {
+  if (process.env.EXPO_ROUTER_IMPORT_MODE) {
+    return process.env.EXPO_ROUTER_IMPORT_MODE;
+  }
+  const { exp } = getConfigMemo(projectRoot);
+  let mode = [process.env.NODE_ENV, true].includes(
+    exp.extra?.router?.asyncRoutes
+  )
+    ? "lazy"
+    : "sync";
+
+  // TODO: Production bundle splitting
+
+  if (process.env.NODE_ENV === "production" && mode === "lazy") {
+    throw new Error(
+      "Async routes are not supported in production yet. Set `extra.router.asyncRoutes` to `development`, `false`, or `undefined`."
+    );
+  }
+
+  // NOTE: This is a temporary workaround for static rendering on web.
+  if (platform === "web" && process.env.EXPO_USE_STATIC) {
+    mode = "sync";
+  }
+
+  // Development
+  debug("Router import mode", mode);
+
+  process.env.EXPO_ROUTER_IMPORT_MODE = mode;
+  return mode;
+}
+
 function getExpoRouterAppRoot(projectRoot) {
   // Bump to v2 to prevent the CLI from setting the variable anymore.
   // TODO: Bump to v3 to revert back to the CLI setting the variable again, but with custom value
@@ -26,7 +66,7 @@ function getExpoRouterAppRoot(projectRoot) {
   }
   const routerEntry = resolveFrom.silent(projectRoot, "expo-router/entry");
 
-  const { exp } = getConfig(projectRoot);
+  const { exp } = getConfigMemo(projectRoot);
   const customSrc = exp.extra?.router?.unstable_src || "./app";
   const isAbsolute = customSrc.startsWith("/");
   // It doesn't matter if the app folder exists.
@@ -46,6 +86,7 @@ module.exports = function (api) {
   const getRelPath = (state) =>
     "./" + nodePath.relative(state.file.opts.root, state.filename);
 
+  const platform = api.caller((caller) => caller?.platform);
   return {
     name: "expo-router",
     visitor: {
@@ -123,6 +164,19 @@ module.exports = function (api) {
           return;
         }
 
+        // Expose the app route import mode.
+        if (
+          t.isIdentifier(parent.node.property, {
+            name: "EXPO_ROUTER_IMPORT_MODE",
+          }) &&
+          !parent.parentPath.isAssignmentExpression()
+        ) {
+          parent.replaceWith(
+            t.stringLiteral(getExpoRouterImportMode(projectRoot, platform))
+          );
+          return;
+        }
+
         if (
           !t.isIdentifier(parent.node.property, {
             name: "EXPO_ROUTER_APP_ROOT",

package/build/getRoutes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getRoutes.d.ts","sourceRoot":"","sources":["../src/getRoutes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAS5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,WAAW,CAAC,GAAG;IACnE,yBAAyB;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,QAAQ,CA+C5D;AAyBD,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,MAAM,GACX,iBAAiB,GAAG,IAAI,CAK1B;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAMlE;AA8MD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,EAAE,QAiBxD;AAED,sEAAsE;AACtE,wBAAgB,SAAS,CACvB,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,SAAS,GAAG,IAAI,CAYlB;AAED,wBAAsB,cAAc,CAClC,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAY3B;AAUD,+CAA+C;AAC/C,wBAAgB,cAAc,CAC5B,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,SAAS,GAAG,IAAI,CAIlB;AAYD,wBAAsB,mBAAmB,CACvC,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAI3B;AA4CD;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,MAAM,EAAE,SAAS,GAChB,SAAS,GAAG,IAAI,CAgBlB"}
+{"version":3,"file":"getRoutes.d.ts","sourceRoot":"","sources":["../src/getRoutes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAS5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,WAAW,CAAC,GAAG;IACnE,yBAAyB;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,QAAQ,CA+C5D;AAyBD,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,MAAM,GACX,iBAAiB,GAAG,IAAI,CAK1B;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAMlE;AAsND;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,EAAE,QAiBxD;AAED,sEAAsE;AACtE,wBAAgB,SAAS,CACvB,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,SAAS,GAAG,IAAI,CAYlB;AAED,wBAAsB,cAAc,CAClC,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAY3B;AAUD,+CAA+C;AAC/C,wBAAgB,cAAc,CAC5B,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,SAAS,GAAG,IAAI,CAIlB;AAYD,wBAAsB,mBAAmB,CACvC,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAI3B;AA4CD;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,MAAM,EAAE,SAAS,GAChB,SAAS,GAAG,IAAI,CAgBlB"}

package/build/layouts/Tabs.d.ts

@@ -139,7 +139,7 @@ export declare const Tabs: React.ForwardRefExoticComponent<Omit<Omit<import("@re
             show?: import("@react-navigation/bottom-tabs/lib/typescript/src/types").TabBarVisibilityAnimationConfig | undefined;
             hide?: import("@react-navigation/bottom-tabs/lib/typescript/src/types").TabBarVisibilityAnimationConfig | undefined;
         } | undefined;
-        tabBarStyle?: false | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.Value | import("react-native").Animated.AnimatedInterpolation<string | number> | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | import("react-native").Animated.WithAnimatedArray<import("react-native").Falsy | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<import("react-native").Falsy | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | readonly (import("react-native").Falsy | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle>)[]> | null | undefined;
+        tabBarStyle?: false | import("react-native").Animated.Value | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").Animated.AnimatedInterpolation<string | number> | import("react-native").Animated.WithAnimatedObject<import("react-native").ViewStyle> | import("react-native").Animated.WithAnimatedArray<import("react-native").Falsy | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<import("react-native").Falsy | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | readonly (import("react-native").Falsy | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle>)[]> | null | undefined;
         tabBarBackground?: (() => React.ReactNode) | undefined;
         lazy?: boolean | undefined;
         header?: ((props: import("@react-navigation/bottom-tabs").BottomTabHeaderProps) => React.ReactNode) | undefined;

package/build/onboard/useTutorial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTutorial.d.ts","sourceRoot":"","sources":["../../src/onboard/useTutorial.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAa1C,yIAAyI;AACzI,wBAAgB,WAAW,CAAC,OAAO,EAAE,cAAc,OAwBlD"}
+{"version":3,"file":"useTutorial.d.ts","sourceRoot":"","sources":["../../src/onboard/useTutorial.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAa1C,yIAAyI;AACzI,wBAAgB,WAAW,CAAC,OAAO,EAAE,cAAc,OA4BlD"}

package/build/useScreens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScreens.d.ts","sourceRoot":"","sources":["../src/useScreens.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAGL,SAAS,EAGV,MAAM,SAAS,CAAC;AAIjB,MAAM,MAAM,WAAW,CACrB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACxD;IACF,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,CAAC;IAGnB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB,CAAC;AA8DF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,CAUxE;AAMD,mFAAmF;AACnF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,SAAS,+GAgD1D;AAED,oGAAoG;AACpG,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CAAC;;sCA0B5C"}
+{"version":3,"file":"useScreens.d.ts","sourceRoot":"","sources":["../src/useScreens.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAIL,SAAS,EAGV,MAAM,SAAS,CAAC;AAMjB,MAAM,MAAM,WAAW,CACrB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACxD;IACF,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,CAAC;IAGnB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB,CAAC;AA8DF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,CAUxE;AA6BD,mFAAmF;AACnF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,SAAS,+GA2E1D;AAED,oGAAoG;AACpG,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CAAC;;sCA0B5C"}

package/build/views/EmptyRoute.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function EmptyRoute(): JSX.Element;
+//# sourceMappingURL=EmptyRoute.d.ts.map

package/build/views/EmptyRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyRoute.d.ts","sourceRoot":"","sources":["../../src/views/EmptyRoute.tsx"],"names":[],"mappings":";AAKA,wBAAgB,UAAU,gBAUzB"}

package/build/views/SuspenseFallback.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { RouteNode } from "../Route";
+export declare function SuspenseFallback({ route }: {
+    route: RouteNode;
+}): JSX.Element;
+//# sourceMappingURL=SuspenseFallback.d.ts.map

package/build/views/SuspenseFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuspenseFallback.d.ts","sourceRoot":"","sources":["../../src/views/SuspenseFallback.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,eAM/D"}

package/build/views/Toast.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const CODE_FONT: string;
+export declare function ToastWrapper({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function Toast({ children, filename, warning, }: {
+    children: React.ReactNode;
+    filename?: string;
+    warning?: boolean;
+}): JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

package/build/views/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/views/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,QAIpB,CAAC;AAeH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eASvE;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,eAyBA"}

package/entry.js

@@ -2,10 +2,14 @@ import "@expo/metro-runtime";
 
 import { ExpoRoot } from "expo-router";
 import Head from "expo-router/head";
+import { renderRootComponent } from "expo-router/src/renderRootComponent";
 
-import { renderRootComponent } from "./src/renderRootComponent";
-
-const ctx = require.context(process.env.EXPO_ROUTER_APP_ROOT);
+const ctx = require.context(
+  process.env.EXPO_ROUTER_APP_ROOT,
+  true,
+  /.*/,
+  process.env.EXPO_ROUTER_IMPORT_MODE
+);
 
 // Must be exported or Fast Refresh won't update the context
 export function App() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-router",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "main": "src/index.tsx",
   "types": "build/index.d.ts",
   "files": [
@@ -92,7 +92,7 @@
   },
   "dependencies": {
     "@bacons/react-views": "^1.1.3",
-    "@expo/metro-runtime": "2.0.3",
+    "@expo/metro-runtime": "2.0.4",
     "@radix-ui/react-slot": "^1.0.0",
     "@react-navigation/bottom-tabs": "~6.5.7",
     "@react-navigation/native": "~6.1.6",

package/src/getRoutes.ts

@@ -271,11 +271,19 @@ function contextModuleToFileNodes(
     // In development, check if the file exports a default component
     // this helps keep things snappy when creating files. In production we load all screens lazily.
     try {
-      if (!contextModule(key)?.default) {
-        return null;
+      if (process.env.NODE_ENV === "development") {
+        // If the user has set the `EXPO_ROUTER_IMPORT_MODE` to `sync` then we should
+        // filter the missing routes.
+        if (process.env.EXPO_ROUTER_IMPORT_MODE === "sync") {
+          if (!contextModule(key)?.default) {
+            return null;
+          }
+        }
       }
       const node: FileNode = {
-        loadRoute: () => contextModule(key),
+        loadRoute() {
+          return contextModule(key);
+        },
         normalizedName: getNameFromFilePath(key),
         contextKey: key,
       };

package/src/onboard/useTutorial.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from "react";
+import { useMemo, ComponentType } from "react";
 
 import { RequireContext } from "../types";
 
 function isFunctionOrReactComponent(
   Component: any
-): Component is React.ComponentType {
+): Component is ComponentType {
   return (
     !!Component &&
     (typeof Component === "function" ||
@@ -23,14 +23,18 @@ export function useTutorial(context: RequireContext) {
   const keys = useMemo(() => context.keys(), [context]);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const hasAnyValidComponent = useMemo(() => {
-    for (const key of keys) {
-      // NOTE(EvanBacon): This should only ever occur in development as it breaks lazily loading.
-      const component = context(key)?.default;
-      if (isFunctionOrReactComponent(component)) {
-        return true;
+    if (process.env.EXPO_ROUTER_IMPORT_MODE === "sync") {
+      for (const key of keys) {
+        // NOTE(EvanBacon): This should only ever occur in development as it breaks lazily loading.
+        const component = context(key)?.default;
+        if (isFunctionOrReactComponent(component)) {
+          return true;
+        }
       }
+      return false;
     }
-    return false;
+    return !!context.keys().length;
+    // return false;
   }, [keys]);
 
   if (hasAnyValidComponent) {

package/src/useScreens.tsx

@@ -3,12 +3,15 @@ import React from "react";
 import { LocationProvider } from "./LocationProvider";
 import {
   DynamicConvention,
+  LoadedRoute,
   Route,
   RouteNode,
   sortRoutesWithInitial,
   useRouteNode,
 } from "./Route";
 import { Screen } from "./primitives";
+import { EmptyRoute } from "./views/EmptyRoute";
+import { SuspenseFallback } from "./views/SuspenseFallback";
 import { Try } from "./views/Try";
 
 export type ScreenProps<
@@ -103,6 +106,29 @@ export function useSortedScreens(order: ScreenProps[]): React.ReactNode[] {
   );
 }
 
+function fromImport({ ErrorBoundary, ...component }: LoadedRoute) {
+  if (ErrorBoundary) {
+    return {
+      default: React.forwardRef((props: any, ref: any) => {
+        const children = React.createElement(component.default, {
+          ...props,
+          ref,
+        });
+        return <Try catch={ErrorBoundary}>{children}</Try>;
+      }),
+    };
+  }
+  return { default: component.default || EmptyRoute };
+}
+
+function fromLoadedRoute(res: LoadedRoute) {
+  if (!(res instanceof Promise)) {
+    return fromImport(res);
+  }
+
+  return res.then(fromImport);
+}
+
 // TODO: Maybe there's a more React-y way to do this?
 // Without this store, the process enters a recursive loop.
 const qualifiedStore = new WeakMap<RouteNode, React.ComponentType<any>>();
@@ -113,7 +139,48 @@ export function getQualifiedRouteComponent(value: RouteNode) {
     return qualifiedStore.get(value)!;
   }
 
-  const { default: Component, ErrorBoundary } = value.loadRoute();
+  let getLoadable: (props: any, ref: any) => JSX.Element;
+
+  // TODO: This ensures sync doesn't use React.lazy, but it's not ideal.
+  if (process.env.EXPO_ROUTER_IMPORT_MODE === "sync") {
+    const SyncComponent = React.forwardRef((props, ref) => {
+      const res = value.loadRoute();
+      const Component = fromImport(res).default;
+      return <Component {...props} ref={ref} />;
+    });
+
+    getLoadable = (props: any, ref: any) => (
+      <SyncComponent
+        {...{
+          ...props,
+          ref,
+          // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
+          // the intention is to make it possible to deduce shared routes.
+          segment: value.route,
+        }}
+      />
+    );
+  } else {
+    const AsyncComponent = React.lazy(async () => {
+      const res = value.loadRoute();
+      return fromLoadedRoute(res) as Promise<{
+        default: React.ComponentType<any>;
+      }>;
+    });
+    getLoadable = (props: any, ref: any) => (
+      <React.Suspense fallback={<SuspenseFallback route={value} />}>
+        <AsyncComponent
+          {...{
+            ...props,
+            ref,
+            // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
+            // the intention is to make it possible to deduce shared routes.
+            segment: value.route,
+          }}
+        />
+      </React.Suspense>
+    );
+  }
 
   const QualifiedRoute = React.forwardRef(
     (
@@ -128,32 +195,18 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       }: any,
       ref: any
     ) => {
-      const children = React.createElement(Component, {
-        ...props,
-        ref,
-        // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
-        // the intention is to make it possible to deduce shared routes.
-        segment: value.route,
-      });
-
-      const errorBoundary = React.useMemo(() => {
-        if (ErrorBoundary) {
-          return <Try catch={ErrorBoundary}>{children}</Try>;
-        }
-        return children;
-      }, [ErrorBoundary, children]);
+      const loadable = getLoadable(props, ref);
 
       return (
         <LocationProvider>
-          <Route node={value}>{errorBoundary}</Route>
+          <Route node={value}>{loadable}</Route>
         </LocationProvider>
       );
     }
   );
 
-  QualifiedRoute.displayName = `Route(${
-    Component.displayName || Component.name || value.route
-  })`;
+  QualifiedRoute.displayName = `Route(${value.route})`;
+
   qualifiedStore.set(value, QualifiedRoute);
   return QualifiedRoute;
 }

package/src/views/EmptyRoute.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { Toast, ToastWrapper } from "./Toast";
+import { useRouteNode } from "../Route";
+
+export function EmptyRoute() {
+  const route = useRouteNode();
+
+  return (
+    <ToastWrapper>
+      <Toast warning filename={route?.contextKey}>
+        Missing default export
+      </Toast>
+    </ToastWrapper>
+  );
+}

package/src/views/SuspenseFallback.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { Toast, ToastWrapper } from "./Toast";
+import { RouteNode } from "../Route";
+
+export function SuspenseFallback({ route }: { route: RouteNode }) {
+  return (
+    <ToastWrapper>
+      <Toast filename={route?.contextKey}>Bundling...</Toast>
+    </ToastWrapper>
+  );
+}

package/src/views/Toast.tsx

@@ -0,0 +1,99 @@
+import { Image, StyleSheet, Text, View } from "@bacons/react-views";
+import { BottomTabBarHeightContext } from "@react-navigation/bottom-tabs";
+import React from "react";
+import { ActivityIndicator, Animated, Platform } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export const CODE_FONT = Platform.select({
+  default: "Courier",
+  ios: "Courier New",
+  android: "monospace",
+});
+
+function useFadeIn() {
+  // Returns a React Native Animated value for fading in
+  const [value] = React.useState(() => new Animated.Value(0));
+  React.useEffect(() => {
+    Animated.timing(value, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+  return value;
+}
+
+export function ToastWrapper({ children }: { children: React.ReactNode }) {
+  const inTabBar = React.useContext(BottomTabBarHeightContext);
+  const Wrapper = inTabBar ? View : SafeAreaView;
+
+  return (
+    <Wrapper collapsable={false} style={{ flex: 1 }}>
+      {children}
+    </Wrapper>
+  );
+}
+
+export function Toast({
+  children,
+  filename,
+  warning,
+}: {
+  children: React.ReactNode;
+  filename?: string;
+  warning?: boolean;
+}) {
+  const filenamePretty = React.useMemo(() => {
+    if (!filename) return undefined;
+    return "app" + filename.replace(/^\./, "");
+  }, [filename]);
+  const value = useFadeIn();
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.toast, { opacity: value }]}>
+        {!warning && <ActivityIndicator color="white" />}
+        {warning && (
+          <Image
+            source={require("expo-router/assets/error.png")}
+            style={styles.icon}
+          />
+        )}
+        <View style={{ marginLeft: 8 }}>
+          <Text style={styles.text}>{children}</Text>
+          {filenamePretty && (
+            <Text style={styles.filename}>{filenamePretty}</Text>
+          )}
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "transparent",
+    flex: 1,
+  },
+  icon: { width: 20, height: 20, resizeMode: "contain" },
+  toast: {
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(255,255,255,0.2)",
+    flexDirection: "row",
+    position: "absolute",
+    bottom: 8,
+    left: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 4,
+    backgroundColor: "black",
+  },
+  text: { color: "white", fontSize: 16 },
+  filename: {
+    fontFamily: CODE_FONT,
+    opacity: 0.8,
+    color: "white",
+    fontSize: 12,
+  },
+  code: { fontFamily: CODE_FONT },
+});