React Native Web and Expo for Web
I'm using RNW. It helped to get started. I'm working on removing it.
It is big, almost 300KB to the parsed JS size, ~69KB gzipped.
The # of useful in both RNW and React-Native are minimal. The strength of RN is 3rd party components, most of which aren't applicable for a website that has to work on both desktop and mobile.
Doing responsive design without CSS sucks. Media queries are far better than anything React Native offers. Yes you can setup listeners all over the place and modify styles, but that is far more work than using media queries in CSS.
The React Navigation team currently recommends against using React Navigation for RNW projects. (A member of the React Navigation team said as such when RNW was discussed a week or two ago on this subreddit.)
My app uses React Native Elements for its UI toolkit. RNE has a dependency on React Native Vector Icons. Put together they were adding around 250KB to my bundle size. On moderate powered smartphones they were adding over a second to my time to first render.
At some point you'll find yourself reaching for third party React-DOM packages. Then you'll have to use CSS anyway, except now some of your elements are styled with CSS and others are not (RNW has deprecated className).
That said, RNW did help me get my site up and running really quickly at first. (Just, you know, the site wasn't quick....)
More on reddit.comIs expo ready to support web platform as well?
Tips for vibe coding React Native Expo Project : expo
How can I build and distribute an Expo (React Native) app without using EAS Build, while still supporting CI/CD and OTA testing for QA? : reactnative
Videos
Starting work on a personal project where the mobile app and web need to have the same functionality. Instead of treating it like two separate projects (i.e., writing for ReactJS, then React Native, and sharing contexts/hooks where I can), it makes sense to treat it like one project.
In playing with expo-cli I noticed in the CLI it mentioed "web" so I started looking into it. That being said, it says in bold:
This is a preview and subject to breaking changes. Do not use this in production yet.
So pursuing using Expo for Web may not be the way to go at this point in time.
Despite that, there is this decent article about it:
https://medium.com/@toastui/from-zero-to-publish-expo-web-react-native-for-web-tutorial-e3e020d6d3ff
The other option I'm seeing is just React Native Web which Expo for Web is using anyway. The documentation on getting started on it is less than helpful. This article does help clearing some of it up:
https://scotch.io/tutorials/build-mobile-friendly-web-apps-with-react-native-web
For example, the Getting Started:
Install
yarn add react react-dom react-native-web
Starter kits
create-react-app includes built-in support for aliasing react-native-web to react-native.
create-react-app my-app
I guess the "Install" is if you plan on not using create-react-app?
Then it goes on talk about configuring alias despite saying "create-rect-app includes built-in support for aliasing react-native-web to react-native."
Again, I guess all of the bundle configs it goes on to discuss are for if you are not using create-react-app?
Then the article goes on to show:
npx create-react-app random-people yarn add --dev babel-plugin-module-resolver babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo
Why all the resolvers if create-react-app already has this built in?
I can see point of babel-preset-expo since expo is being added.
At any rate, at least the article actually explains how to setup the development environment and get things to production... nothing I saw in the repos documentation.
I guess one last question: anyone using React Native Web and what are your thoughts on it?
I'm using RNW. It helped to get started. I'm working on removing it.
It is big, almost 300KB to the parsed JS size, ~69KB gzipped.
The # of useful in both RNW and React-Native are minimal. The strength of RN is 3rd party components, most of which aren't applicable for a website that has to work on both desktop and mobile.
Doing responsive design without CSS sucks. Media queries are far better than anything React Native offers. Yes you can setup listeners all over the place and modify styles, but that is far more work than using media queries in CSS.
The React Navigation team currently recommends against using React Navigation for RNW projects. (A member of the React Navigation team said as such when RNW was discussed a week or two ago on this subreddit.)
My app uses React Native Elements for its UI toolkit. RNE has a dependency on React Native Vector Icons. Put together they were adding around 250KB to my bundle size. On moderate powered smartphones they were adding over a second to my time to first render.
At some point you'll find yourself reaching for third party React-DOM packages. Then you'll have to use CSS anyway, except now some of your elements are styled with CSS and others are not (RNW has deprecated className).
That said, RNW did help me get my site up and running really quickly at first. (Just, you know, the site wasn't quick....)
Have you looked at Ionic React?
One of my clients is looking for a cross platform app and I suggested react native but later on I got to know that he expected web platform as well in the same codebase.
I researched a bit on expo and it seems it has an option to build app on web as well. Just curious how mature it is and should I move forward with it given major component I’m going to use is google maps.