import router from './router';
import { usePathname } from 'expo-router';

router()
  .addRoute('/shop', ShopScreen)
  .addRoute('/shop/{item}', ItemScreen)
  .addRoute('/item-designer', ItemDesignerScreen)
;

// In app/[...container].tsx
export default function Container() {
    const pathname = usePathname();

    return (
        <>
            ...
            {router.execute(pathname, extraProps)}
            ...
        </>
    )
}

import router from './router';
import { usePathname } from 'expo-router';

router('/item-designer')
    .addRoute('/theme-picker/{color}')
    .addRoute('/pixel-art/{color}')

export default function ItemDesignerScreen() {
    const pathname = usePathname();

    return (
        <>
            ...
            {router('/item-designer').execute(pathname, extraProps)}
            ...
        </>
    )
}

import router from './router';
import { usePathname } from 'expo-router';

const r = router('/item-designer')
    .addRoute('/theme-picker/{color}')
    .addRoute('/pixel-art/{color}')

export default function ItemDesignerScreen() {
    const pathname = usePathname();

    return (
        <>
            ...
            {r.execute(pathname, extraProps)}
            ...
        </>
    )
}

export type RoutableComponent = (props: {routeExecution: RouteExecution}) => JSX.Element

export type Route = {
  pattern: string,
  regexp: RegExp,
  pathParameters: string[],
}

export type RouteExecution = {
  route: Route,
  args: Record<string, string>,
}

class Router {
  ...
  navigate(href: Parameters<(typeof expoRouter)['navigate']>[0]) {
    return expoRouter.navigate(href);
  }

  push(href: Parameters<(typeof expoRouter)['push']>[0]) {
    return expoRouter.push(href);
  }

  replace(href: Parameters<(typeof expoRouter)['replace']>[0]) {
    return expoRouter.replace(href);
  }

  back() {
    return expoRouter.back();
  }

  canGoBack() {
    return expoRouter.canGoBack();
  }
}