I Built a File-Based Router for React Native

Chmal wanted to explore how file-based routing works and challenge himself while taking on more management tasks. React Native apps commonly use React Navigation, where screens and nested navigators form a component hierarchy. His experiment aimed to represent that hierarchy with directories and files, while supporting URL-style navigation and dynamic parameters.

Metro does not allow arbitrary runtime `require` calls: imports need literal paths, and module IDs can change between builds. Chmal first tried generating a manifest and watching the app directory for changes, then found Metro’s unstable `require.context` API. With `unstable_allowRequireContext` enabled, it can include files from a specified directory and make them available to the router.

Chmal represented each route as a tree node containing its segment name, path, screen component, and child nodes. The router traverses the tree to build React Navigation screens and match URL segments. It checks static routes before dynamic ones, so a route such as `/latest` is not swallowed by a slug parameter.

Special `loading` and `error` files let the router wrap screens in Suspense and an error boundary. Chmal stored those components on route nodes and used a custom route component to apply the wrappers. He also supported a `screenOptions` export, passing options such as header visibility or title through to React Navigation.

In the demo, screens received URL parameters, an intentional render error showed the custom error component, and a Suspense-triggering promise showed the loading component. Chmal cautioned that the weekend project was not production-grade: it lacked nested navigators such as tabs, route fallbacks, and a not-found page, and its performance and tree structure needed work.