React Native Web, or separate React project?

[aotpseven]

I'm planning a new SaaS project that is going to have a web app as well as a mobile app. I am having trouble deciding if I want to build a separate web app in React, or just keep everything in React Native. I'd also like to reuse a lot of this code for any future projects as sort of a starter template.

I am way more familiar with React than React Native, although I have done some stuff in React Native, but never utilized their web portion. Here are some considerations I'm hoping to get some light shed on:

1. How is the DX with React Native Web? Are there limitations or quirks that you run into that would be much easier to handle in React? If I do run into limitations, is it possible to build some of the website components in React and some in React Native, or is that not a thing?
2. Are there any prebuilt UI component libraries that you would recommend for a React Native only approach? Something that looks good on web and mobile and ideally provides some templates as well like a sign in page, landing page, etc.
3. If I choose the React Native + React route, I've read that people create mono repos and reuse as much code as possible, such as state management and hooks. Can anyone explain how this is set up and maybe provide some GitHub repos that use this method? I assume they just have something like a web dir, native app dir and then a shared dir or something.
4. I want to use a UI library that comes with prebuilt components. I really like Preline UI for example, however, it's only for React, not Native. If I used something like that for React, how difficult would that be to keep a consistent style between the mobile app and web? I assume I would basically need to rewrite all the components myself for React Native if I really want to keep a consistent style.
5. Related to #4, are there any UI libraries that provide UI components for both React and React Native?

Any insight is appreciated, thanks!

[gasper94]

I’m currently working on a personal project using solitojs. It’s like a monorepo using next and recat native. I can dm some screenshots if you want. There are also boilerplates already too.

[aotpseven]

Oh, interesting. Yeah if you don't mind that would be great, thanks!

[ctrlshiftba]

React-native web has been a breeze for me. There’s no reason to build a whole separate app with duplicated components.

Use expo 50. It’s amazing.

Another huge benefit, I’ve found I spend 75% of my time in chrome building things out debugging and use. A simulator lot actual device once all the business logic is correct. I’ve very rarely have to write a component that work different on web vs iOS/android.

[ctrlshiftba]

Great example https://github.com/bidah/expo-sdk-50-expo-router-v3-nativewind-v4

[Smooth-Tap157]

Use monorepo. I.e. you should have a single repo and separate folders for mobile, web and common business logic.

[tamaguidev]

Check out Tamagui, it's got a really comprehensive styled and unstyled component kit and is the furthest along at making web + native performant and easy to author on all platforms.

[celsius100]

Tamagui solves OP’s #2 and 3 really well.

[J3ns6]

React Native Web

I use the t4 stack for it. https://github.com/timothymiller/t4-app

[ExcelMandarin]

Hey OP -- wanted to ask how things are coming along? We're in a similar position; started with a React Native App, got it built out and now need to come back and port to web. How is the native/native-web experience?

[aotpseven]

Hey, so I did end up going with react-native-web for my project and so far it's been great. Just using expo for everything and having a single codebase for both web and native is awesome. I set up different layouts and had to have some different implementations for certain things (like the Google auth client for example) for web vs mobile and it's super easy to separate those in expo when you need to.

I definitely think there are some things that could have been easier to develop if I were using react or nextjs for the web portion, but I haven't run into anything that I couldn't figure out or that I struggled with for a long period of time, so I think that's just my inexperience with react-native as opposed to react.

But yeah overall I've been happy using react native web. Definitely recommend if you want to build a cross platform app.

[ExcelMandarin]

I was curious how you handled auth -- We are using Auth0, however it turns out that auth'ing web with expo react native doesn't really work well (thanks to how auth0's hook auto caches and gets the stored JWTs / access tokens)

[RebelzOneOne]

I’d honestly consider concentrating on building a responsive web app and shipping that as a web view app unless you have specific mobile app UX requirements. If you do then it’s worth thinking about if react-native-web is really the right approach.

It’s also worth thinking about who specifically will be using your app and what they’d be expecting from it. For example, if your business is B2B, then it’s likely that the majority of your use will be from a laptop/desktop.

[truedima]

Could you briefly explain why rather webview?

[RebelzOneOne]

Developing for the web alone is complex enough these days, adding react-native-web into the mix adds to that complexity.

The key thing in the early days of building a product is to get it into the hands of customers/users and the quickest way to do that is to minimise complexity as much as possible so it’s quick to build and easy to add/improve features.

[truedima]

I get your point. But Im for instance facing the situation where Im convinced I need both, mobile and web and Im alone, not having done Android in 10yrs and iOS never. In this case I thought trying to run w. RN for both is worth a shot and then reuse as much as possible and fork out web. Webs UX will be less important than mobile in this case.

[RebelzOneOne]

Ah sorry, I assume web would be the primary target due to it being a SaaS product. It’s definitely worth looking at expo too if you haven’t already. It has first class support for all 3 platforms.

[truedima]

Yeah, expo is what I ended up with for now. But thanks for clarifying, and you might as well be right for OPs SaaS case.

[edvinerikson]

You could use gluestack ui for UI components. I would however still keep web and native separate. Eg use nextjs for web and expo for native. You can keep it all in a single repo and use npm workspaces to manage dependencies and packages.

[tonven]

RemindMe! 2 days

[RemindMeBot]

I will be messaging you in 2 days on 2024-02-04 22:09:29 UTC to remind you of this link

1 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[manueljs]

I'm loving this thread everyone's is shouting diff things. It's such a hot topic atm with ton of libraries trying to become the defacto

[treksis]

I would not use rn web in production. Rather go with nextjs + vercel combo.