Expo-router utility to set options

exampleRoute.tsx

import { WithNavigation } from 'WithNavigation'

const HomeScreen = () => {
  return (
     <div> Some Content </div>
  )
}

export default WithNavigation(HomeScreen, {
  type: 'stack',
  options: {
    title: 'Home Screen',
  },
})

WithNavigation.tsx

export type RouteTypes = {
  home: undefined
  postDetail: { id: string }
  postList: undefined
  login: undefined
  signUp: undefined
}


type ScreenOptionsProps = {
  stack: Parameters<typeof Stack['Screen']>['0']
  tabs: Parameters<typeof Tabs['Screen']>['0']
}

type WithNavigationProps =
  | [
      ComponentType<NativeStackScreenProps<RouteTypes, keyof RouteTypes>>,
      { type: 'stack' } & ScreenOptionsProps['stack']
    ]
  | [
      ComponentType<BottomTabScreenProps<RouteTypes, keyof RouteTypes>>,
      { type: 'tabs' } & ScreenOptionsProps['tabs']
    ]

export const WithNavigation = (...args: WithNavigationProps) => {
  const [Component, navigationOptions] = args
  const { type, ...navigationProps } = navigationOptions

  const NavComponent = () => {
    switch (type) {
      case 'stack':
        return (
          <Stack.Screen {...(navigationProps as ScreenOptionsProps['stack'])} />
        )
      case 'tabs':
        return (
          <Tabs.Screen {...(navigationProps as ScreenOptionsProps['tabs'])} />
        )
      default:
        return null
    }
  }

  return (props: any) => {
    return (
      <>
        <NavComponent />
        <Component {...props} />
      </>
    )
  }
}