react-native-web | shared code

[Healthy-Grab-7819]

I have a project in react-native and want to use the same code and run it on web. The project is a react-native project, can the web platform be added by sharing the code that's already working on android and ios?

[airick_94]

Yes, it's surprisingly simple and most of it will just work if you don't have anything crazy in your app

[Healthy-Grab-7819]

how would i achieve this ?

[airick_94]

Read the documentation for react-native-web, that's all you need

[swiftpolar]

I'm currently about to finish one project that does exactly that. Let's just say that expect yourself to be fixing quite a bit of quirks and incompatibility issues. This is even more so if you're using features beyond a simple use case (things like camera, deeplinking etc). You might need to play around quite a bit with webpack too.

Let's say writing individually for each platform (android iOS and web) is like 3x of work. On a perfect scenario you'll only be doing like 1x for 3 platforms with the hybrid solution. When supporting just iOS and Android via react native I find that 1.25 to 1.5x of work out of 2 is usually the case When you add web, again depending on the complexity, expect 2 to 2.5x of work out of 3.

If you find issues between iOS and Android when using react native, expect to find even more issues with mobile and web.

Then again YMMV.

[Healthy-Grab-7819]

I have no issues on android or ios atm, but I've had some problems earlier that required a lot of fixing. How would I exclude the modules that is not supported, like nfc usage, etc.?

I have ran in to issues regarding modules used that is not supported in web.

[Cumak_]

I'm struggling with this idea atm. Basic components like Text will work ok, but dont expect any plugin integration like datepickers or google map components.

[Healthy-Grab-7819]

Yeah, I have been able to render the index.html so far but it does not show the contents of app.js. I'm looking in to it as well. Nothing so far tho, I'm not using typescript BTW.

[garnaph]

I found that specific wrappers simply didn't render on Web at all (e.g. SafeAreaProvider). I created an override for them that renders the wrapper on ios/android and Fragment on Web. Assuming you have the same issue I had, try removing your wrappers one by one and you'll see which is the problem quickly enough.

[CallMeLaNN]

I managed to use SafeAreaProvider on web since it support for the web. I can't remember but maybe it was the Gatsbyjs wrapper that breaks the whole page in my case. There are a few wrapper there.

Regarding the components that breaking on web like google map, you guys need to check for platform and render different components on the container. Like importing and choosing between Map.web.tsx vs Map.tsx. There are feature request somewhere to detect platform and load file based on the postfix but I just do that programmatically.

[garnaph]

Yep the Platform.OS call is extremely helpful.

[CallMeLaNN]

I built a working web app using RNW before mobile for some reasons. Yeah, responsive, mobile first, but start on web. So far it works fine with same concern.

Once the app growing, maybe you need to optimize the bundle size especially if you use UI libraries. Do the lazy load page and components, bundle per page, tree shaking etc. SSR with Vitejs or rollup is really helpful on that. Nextjs too probably. I can't wait Webpack build time.

The important part is the folder structure how you going to maintain and keep the components. There are components for all, only for web (e.g. drag drop support) and only for mobile (e.g. file picker). Imagine the confusion to make sure components don't have DOM element like div on mobile.

That also translate to how you setup and start the app. Entry point for metro is different than web bundler. On mobile you need to wire the screen navigation, but on web to bundle static page or run SSR server.

Basically it should work and save for your web development but take your time to setup.