generated from codinsonn/universal-app-router
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Implement React portability patterns
- Loading branch information
Showing
16 changed files
with
177 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 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: () => ({}), | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Link } from './Link.core.native' |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} /> | ||
} | ||
|
14 changes: 14 additions & 0 deletions
14
features/app-core/navigation/useRouteParams.core.native.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { useRouteParams } from './useRouteParams.core.native' |
5 changes: 3 additions & 2 deletions
5
...app-core/navigation/useRouteParams.web.ts → ...ore/navigation/useRouteParams.core.web.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,10 @@ | ||
import { useLocalSearchParams } from 'expo-router' | ||
import type { UniversalRouteScreenProps } from './useRouteParams.types' | ||
import { useContext } from 'react' | ||
import { CoreContext } from '../context/CoreContext' | ||
import { UniversalRouteScreenProps } from './useRouteParams.types' | ||
|
||
/* --- useRouteParams() ------------------------------------------------------------------------ */ | ||
|
||
/** --- 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 | ||
const { useContextRouteParams } = useContext(CoreContext) | ||
return useContextRouteParams(routeScreenProps) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { router } from 'expo-router' | ||
import { UniversalRouterMethods } from './useRouter.types' | ||
|
||
/* --- useRouter() ----------------------------------------------------------------------------- */ | ||
|
||
export const useRouter = () => { | ||
return { | ||
push: router.push, | ||
navigate: router.navigate, | ||
replace: router.replace, | ||
back: router.back, | ||
canGoBack: router.canGoBack, | ||
setParams: router.setParams, | ||
} as UniversalRouterMethods | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { useRouter } from './useRouter.core.native' |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,12 @@ | ||
import { router } from 'expo-router' | ||
import { UniversalRouterMethods } from './useRouter.types' | ||
import { useContext } from 'react' | ||
import { CoreContext } from '../context/CoreContext' | ||
|
||
/* --- useRouter() ----------------------------------------------------------------------------- */ | ||
|
||
export const useRouter = () => { | ||
return { | ||
push: router.push, | ||
navigate: router.navigate, | ||
replace: router.replace, | ||
back: router.back, | ||
canGoBack: router.canGoBack, | ||
setParams: router.setParams, | ||
} as UniversalRouterMethods | ||
// Context | ||
const { contextRouter } = useContext(CoreContext) | ||
|
||
// Return | ||
return contextRouter | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters