Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Plugin features when merged
Image
,Link
oruseRouter()
What are "React Portability Patterns"?
Watch this video to know all about the why and how, as explained by Jack Herrington:
What do portability patterns solve?
Typically, in Universal React Setups you had to choose between Next.js or Expo for Web to build the web version of your app. The reason is that the Next.js router and components like Link are pretty incompatible.
e.g. just slapping
.web.tsx
on a Next.js specific version ofLink.tsx
would work great in Next.js... but break the screen or component when opening it with Expo for Web, since using any of the Next.js router hooks or components expect its content to be mounted as well. Which is never the case when rendering web with Expo. You might, for example, have experienced similar issues when trying to render components in Storybook.How do portability patterns work?
The trick is to not split implementations on the web or native level, but on the rendering framework level.
The only real way to do this, as far as I know, was to use React's context API to:
.types.ts
fileLink
component &useRouter()
hook that each implement these same typesLink
&router
object in contextLink
&router
object in contextuseRouter()
hook use therouter
object from contextLink
component pass props to theLink
component from contextuseRouter()
&Link
componentsWhat do portability patterns enable?
Well, to take things further and with the right effort, you could theoretically apply these same steps to:
Whether you want to reuse components and screens in Expo, Next, Remix or a smart fridge, if you have enough time and the right docs at hand, the possibilities are almost endless 👀
Enjoy!