feat: Implement React portability patterns

Author: codinsonn

apps/expo/app/ExpoRootLayout.tsx

@@ -1,15 +1,29 @@
 import { Stack } from 'expo-router'
 import UniversalAppProviders from '@app/core/screens/UniversalAppProviders'
 import UniversalRootLayout from '@app/core/screens/UniversalRootLayout'
+import { Link as ExpoContextLink } from '@app/core/navigation/Link.core.native'
+import { useRouter as useExpoContextRouter } from '@app/core/navigation/useRouter.core.native'
+import { useRouteParams as useExpoRouteParams } from '@app/core/navigation/useRouteParams.core.native'
 
 // -i- Expo Router's layout setup is much simpler than Next.js's layout setup
 // -i- Since Expo doesn't require a custom document setup or server component root layout
 // -i- Use this file to apply your Expo specific layout setup:
 // -i- like rendering our Universal Layout and App Providers
 
+/* --- <ExpoRootLayout/> ----------------------------------------------------------------------- */
+
 export default function ExpoRootLayout() {
+  // Navigation
+  const expoContextRouter = useExpoContextRouter()
+
+  // -- Render --
+
   return (
-    <UniversalAppProviders>
+    <UniversalAppProviders
+      contextLink={ExpoContextLink}
+      contextRouter={expoContextRouter}
+      useContextRouteParams={useExpoRouteParams}
+    >
       <UniversalRootLayout>
         <Stack
           screenOptions={{

apps/next/app/NextClientRootLayout.tsx

@@ -1,6 +1,9 @@
 'use client'
 import React from 'react'
 import UniversalAppProviders from '@app/core/screens/UniversalAppProviders'
+import { Link as NextContextLink } from '@app/core/navigation/Link.core.web'
+import { useRouter as useNextContextRouter } from '@app/core/navigation/useRouter.core.web'
+import { useRouteParams as useNextRouteParams } from '@app/core/navigation/useRouteParams.core.web'
 
 // -i- This is a regular react client component
 // -i- It's still rendered on the server during SSR, but it also hydrates on the client
@@ -15,11 +18,22 @@ type NextClientRootLayoutProps = {
 
 /* --- <NextClientRootLayout/> ---------------------------------------------------------------- */
 
-const NextClientRootLayout = ({ children }: NextClientRootLayoutProps) => (
-    <UniversalAppProviders>
-        {children}
-    </UniversalAppProviders>
-)
+const NextClientRootLayout = ({ children }: NextClientRootLayoutProps) => {
+    // Navigation
+    const nextContextRouter = useNextContextRouter()
+
+    // -- Render --
+    
+    return (
+        <UniversalAppProviders
+            contextLink={NextContextLink}
+            contextRouter={nextContextRouter}
+            useContextRouteParams={useNextRouteParams}
+        >
+            {children}
+        </UniversalAppProviders>
+    )
+}
 
 /* --- Exports --------------------------------------------------------------------------------- */
 

features/app-core/context/CoreContext.ts

@@ -0,0 +1,26 @@
+import React from 'react'
+import { UniversalLinkProps } from '../navigation/Link.types'
+import { UniversalRouterMethods } from '../navigation/useRouter.types'
+import { UniversalRouteScreenProps } from '../navigation/useRouteParams.types'
+import type { useLocalSearchParams } from 'expo-router'
+
+// -i- This context's only aim is to provide React Portability & Framework Ejection patterns if required
+// -i- By allowing you to provide your own custom Link and Router overrides, you could e.g.:
+// -i- 1) Support Expo for Web by not defaulting to Next.js's Link and Router on web
+// -i- 2) Eject from Next.js entirely and e.g. use another framework's Link component and Router
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type CoreContextType = {
+    contextLink: (props: UniversalLinkProps) => JSX.Element
+    contextRouter: UniversalRouterMethods
+    useContextRouteParams: (routeScreenProps: UniversalRouteScreenProps) => ReturnType<typeof useLocalSearchParams>
+}
+
+/* --- Context --------------------------------------------------------------------------------- */
+
+export const CoreContext = React.createContext<CoreContextType>({
+    contextLink: null,
+    contextRouter: null,
+    useContextRouteParams: () => ({}),
+})

features/app-core/navigation/Link.core.native.tsx

@@ -0,0 +1,45 @@
+import { Link as ExpoLink } from 'expo-router'
+import type { UniversalLinkProps } from './Link.types'
+
+/* --- <Link/> --------------------------------------------------------------------------------- */
+
+export const Link = (props: UniversalLinkProps) => {
+    // Props
+    const {
+        children,
+        href,
+        style,
+        replace,
+        onPress,
+        target,
+        asChild,
+        push,
+        testID,
+        nativeID,
+        allowFontScaling,
+        numberOfLines,
+        maxFontSizeMultiplier
+    } = props
+
+    // -- Render --
+
+    return (
+        <ExpoLink
+            href={href}
+            style={style}
+            onPress={onPress}
+            target={target}
+            asChild={asChild}
+            replace={replace}
+            push={push}
+            testID={testID}
+            nativeID={nativeID}
+            allowFontScaling={allowFontScaling}
+            numberOfLines={numberOfLines}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
+        >
+            {children}
+        </ExpoLink>
+    )
+}
+

features/app-core/navigation/Link.core.tsx

@@ -0,0 +1 @@
+export { Link } from './Link.core.native'

features/app-core/navigation/Link.web.tsx renamed to features/app-core/navigation/Link.core.web.tsx

@@ -1,45 +1,14 @@
-import { Link as ExpoLink } from 'expo-router'
+import React from 'react'
 import type { UniversalLinkProps } from './Link.types'
+import { CoreContext } from '../context/CoreContext'
 
 /* --- <Link/> --------------------------------------------------------------------------------- */
 
 export const Link = (props: UniversalLinkProps) => {
-    // Props
-    const {
-        children,
-        href,
-        style,
-        replace,
-        onPress,
-        target,
-        asChild,
-        push,
-        testID,
-        nativeID,
-        allowFontScaling,
-        numberOfLines,
-        maxFontSizeMultiplier
-    } = props
+    // Context
+    const { contextLink: ContextLink } = React.useContext(CoreContext)
 
-    // -- Render --
-
-    return (
-        <ExpoLink
-            href={href}
-            style={style}
-            onPress={onPress}
-            target={target}
-            asChild={asChild}
-            replace={replace}
-            push={push}
-            testID={testID}
-            nativeID={nativeID}
-            allowFontScaling={allowFontScaling}
-            numberOfLines={numberOfLines}
-            maxFontSizeMultiplier={maxFontSizeMultiplier}
-        >
-            {children}
-        </ExpoLink>
-    )
+    // Render
+    return <ContextLink {...props} />
 }
 

features/app-core/navigation/Link.tsx

@@ -0,0 +1,14 @@
+import { useLocalSearchParams } from 'expo-router'
+import type { UniversalRouteScreenProps } from './useRouteParams.types'
+
+/** --- useRouteParams() ----------------------------------------------------------------------- */
+/** -i- Gets the route search and query params on both web and mobile */
+export const useRouteParams = (routeScreenProps: UniversalRouteScreenProps) => {
+  const { params, searchParams } = routeScreenProps
+  const expoRouterParams = useLocalSearchParams()
+  return {
+    ...params,
+    ...searchParams,
+    ...expoRouterParams,
+  } as typeof expoRouterParams
+}

features/app-core/navigation/useRouteParams.core.native.ts

@@ -0,0 +1 @@
+export { useRouteParams } from './useRouteParams.core.native'

features/app-core/navigation/useRouteParams.core.ts

@@ -1,8 +1,9 @@
 import type { UniversalRouteScreenProps } from './useRouteParams.types'
+import type { useLocalSearchParams } from 'expo-router'
 
-/** --- useRouteParams() -------------------------------------------------------------- */
+/** --- useRouteParams() ----------------------------------------------------------------------- */
 /** -i- Gets the route search and query params on both web and mobile */
 export const useRouteParams = (routeScreenProps: UniversalRouteScreenProps) => {
   const { params, searchParams } = routeScreenProps
-  return { ...params, ...searchParams }
+  return { ...params, ...searchParams } as ReturnType<typeof useLocalSearchParams>
 }