[Svarto]

Trying to wrap my head around this as a React Native developer, my biggest issue right now is that we developed mobile first and now need to create a web app.

Using react-native-web is not as straight forward as it first sounds, as there a lot of packages that don't support web and just crash when trying to run the RN app on web.

Would this solve that problem, to be able to easily move a React Native mobile app to web?

[gorbypark]

It probably won’t help with native dependencies on the web. I’ve done a few projects that were android/iOS and then later on we added react-native-web support.

The best way is to go through your package.json dependencies one by one, figure out which support web and which don’t, then go into your project and make an empty component (eg: file.web.js) for any component that doesn’t work on the web. Once you have your app up and running on the web (even with a ton of “blank” web components), start the work of finding web equivalents for the missing functionality. Be diligent that the props for the native component and web component are the same or at least compatible, so that the component calling the now web compatible component needs no changes.

In my experience it’s super important to keep “platform specific” code isolated into its own component. General layout and the skeleton of your app should remain cross platform. In-line use of Platform.OS should be kept to a minimum.

[Svarto]

Makes total sense, thanks a lot! I've been weighing the pros and cons from going RNW or just try a monorepo with Next.js and share logic and navigation (with new expo-router, when it gets to 1.0) but then rebuild the rest.

I like your suggestion though, a good start to see how much of a lift RNW would be or if it is just better to start "fresh" through Next.js

[redbar0n]

This is great advice. It’s very helpful to have a step-by-step procedure to follow for such a transition.

[redbar0n]

Not really, unless you redesign your app using Tamagui.

Your best bet is using React Native Web and removing dependency on the packages that don’t support web: remove/treeshake them, shim them (like RNW does with RN), or detect the platform using a conditional and then exclude the troublesome package/component in favor of a web compatible one.

Alternatively: Keep the web app separate from the native one, and simply share logic and some shared components (RNW) in a monorepo. Could be the easiest path forward, but will give some duplication of code.

My two cents, FWIW. Someone who has done the transition themselves, or has more insight to your particular case could probably offer even better advice.

[Svarto]

Thanks a lot, super helpful to hear the ways to remove/treeshake, shim or conditional to handle mobile Vs web. This was something I struggled to find explained how to do properly, except create files with different extensions - but that felt a bit like using a sledgehammer when a smaller hammer would suffice (in some cases)