Universal React Components
Tl,dr: Took a closer look at React Native. Ended with an aproach to render the same React components on native and on web. Call it React Universal Components.
Time for an update: Took some time off of my morphlog project, will come back to that. Instead, I played with React Native. After seeing a great React Europe talk regarding rendering React components to native, web and other React targets, my interest was sparked.
Sometimes you have to solve a puzzle. Photo by Hans-Peter Gauster on Unsplash.
Code?
Along the way, a kind of bootstrap project was created and open sourced.
It is set up as a Lerna monorepo, with a universal-components, a spa (single page app for web) and native-app package. The latter two were bootstrapped with Create React App and Create React Native App, so we are using established best dev environments.
Right now, we can render reusable components from the universal-components package, to both our targets, mobile and web.
Interesting points
Especially rendering to mobile, with the help of Expo and without any traditional native setup is awesome. No Android Studio or XCode is required.
A trip wire in this setup is reusing existing 3rd party React Native components. These are often not transpiled, so we need to do that ourselves for the web env. For that, I patched them using patch-package, which allows to ‘fix’ npm dependencies reliable in our node_modules.
As mentioned, the project is open sourced an on GitHub, so see for yourself! If you are interested in a deeper writeup, or have any other question, please reach out down there in the comments, or on my twitter.