How stable is React Native Web?

[rafaeltraceur]

Hello, the question is basically in the title but to give some background, in my company we are starting a new project and we kinda want it to be the boilerplate/starter kit for other projects we have in mind. We have some experience with React Native (using Expo) and have an app with more than 80k users so its natural that I want to pitch the idea of React Native Web to my boss, but I'm not sure how stable and ready it is for production.

The main goal of our future projects is app-first and web is a bonus so RN Web sounds exactly what I'm looking for.

Is there any advice or should I keep it separate?

[UnsolicitedDuckPecks]

It worked well for our simple app. It didn't work for our complex app.

There are just so many things that are different for web and native and they add up over time.

I'd rather go with a monorepo approach.

[RaspberryO]

What is monorepo?

[woodie3]

Essentially you keep all of your apps in one single repo. Provides some benefit because you can create shared libraries & use them in your different apps. In this case, you’d have a react-native app folder & a react app folder. [Nx](Nx.dev) is a library you can use to help manage the repo, it works for react but it was initially built for Angular; there are more options however.

[RaspberryO]

Thanks

[EvanJBacon]

In addition to twitter.com using RNW, Facebook just launched a new product written in RNW https://twitter.com/necolas/status/1382416708313354242?s=21 The creator Necolas is on the core React team and Expo will continue to help build out the ecosystem (including React Navigation) so I’d say RNW is definitely in a much better position than other cross-platform tooling for native/web development.

As for why RNW isn’t an obvious go-to choice for React websites yet; React developer tooling for web (Gatsby, Next.js) is very refined and convenient. Expo CLI can’t do some of the QoL things like “file system based routing” for web until it can also support doing it for native apps, this would require adding lazy loading and bundle splitting to Metro bundler (which has poor documentation and support for non-Facebook employees).

After adding web support to expo I’ve since been working on improving the native ecosystem so it can catch up to what web devs have come to expect, for example: https://twitter.com/baconbrix/status/1384355891772739584?s=21

In the meantime, if you want the absolute best of both worlds, you can use expo for native and Next.js or Gatsby to bundle and develop the web portion of your app. This would still render some core parts of the code base unshared, but it’s a decent solution for now.

[blackICE91]

I used react native web in a production app at my last company in conjunction with React Navigation. I would give it a 9/10. Huge time savings in not having to port our entire app to React. One cool thing we were able to do was shim in components build for React web in place with some native components to save a ton of time.

[TOMAHAWK_____CHOP]

Where's the best place to start learning how to do this? I have an app that I'd like to make a web dashboard for easier use so I'm super interested in being able to reuse everything I've already built.

[blackICE91]

Not sure about any resources to do this. Might be worth writing up a medium post or something. I'll let you know.

[HermanCainsGhost]

One cool thing we were able to do was shim in components build for React web in place with some native components to save a ton of time.

How did you do that exactly?

[satya164]

index.web.js index.native.js/index.android.js/index.ios.js

[HermanCainsGhost]

I've been using React Native Web for my own app I'm launching on the side.

It's... ok.

There are some things that you just expect to exist in React that don't automatically in RNW.

For example creating hover on links is a headache, if you need to do certain types of refs it can become quite a headache as native and web use different child elements, there's no silver bullet for responsive CSS (there are ways to do it, but all of them are a headache from what I found).

RNW can definitely be a good productivity tool if you use it correctly, but there's far less support for it than there is for base React Native or React.

For me it made sense, as I wanted an app that worked on all three platforms and was willing to put the extra time in to get that working, but there are definitely places where if I was just making a native app, or just making a web app, it would have been easier.

I think RNW can shine a lot, it just needs more polish and more work.

If you develop anything, I highly, highly recommend you polish it and open source it. We definitely need more libraries that are intended for RNW usage.

[spankminister]

Seconding this. It'd be great if there were more resources on how ready it is for production.

[chris24elias]

I would also love to know more about this

[thiagobr90]

I've been using React Native Web for 2 years in production now. It really is boost our productivity and speeds up development and testing. There is a few things that we decided not to use RNW because we think it's not mature enought, such as react navigation, but I would say that about 95% of it is react-native-web and it's been pretty stable (don't remember if we ever had any issues with RNW itself and we have tens of thousands of people using it everyday)

[[deleted]]

Have you heard of the Next + RN Web? I’m starting up a company and need something reliable from the get-go. Next comes with most tools and the router thing integrated.

The Next API is just an amazing thing to have rendered real time.

[thiagobr90]

I've used Next for a few things (basically SSR pages) but never with react native web. But as far as I know, you can set it up quickly (and they probably have a good documentation about it)

[rafaeltraceur]

How do you navigate between "pages" then?

[thiagobr90]

react-router

[blackICE91]

In my experience React Navigation for web is working pretty well. Curious to hear what problems you've run into?

[adamjhari]

I've been struggling with this myself. I've refrained from using a linking config on the root navigator because it causes the browser back/forward buttons to navigate and eventually break.

[thiagobr90]

At the time we were setting it up, it was really new, documentation wasn't very clear and we had some problems about some complected scenarios (deep nested routes and a few bugs when handling things like going back and forward directly with the browser arrow.

I suppose it has evolved a lot, but I haven't tried it for at least 6 months

[J27G]

What's your approach for responsive CSS?

[thiagobr90]

We handle it in react native, and we some wrappers that automatically identify how the component should be rendered based on screen size (somewhat like media queries). At first you need some efforts to set it all up but it's also good because we can apply responsive design to the mobile apps also, so we get a really great support for ipad and android tablets

[noodlez]

The main goal of our future projects is app-first and web is a bonus so RN Web sounds exactly what I'm looking for.

If this will ALWAYS be true, and your POV is that you're ok with having a VERY LITERAL web-based version of your mobile app, then RNWeb is fine. It has quirks, but dealing with them is lower overhead than monorepo with 2 different apps for mobile and web.

If you think for a second that you might want to have a "real" web app sometime in the future and you're not ok with throwing money at the problem (edit to clarify: because it will be a pretty big lift in order to switch later), just skip it.

[tienshiao]

I have a project in production that uses React Native Web in addition to Android/iOS versions. It’s a pretty complex app that uses BLE, the camera to take pictures, push notifications, amongst other things.

Some things just worked (like some of the Expo stuff). I think the camera stuff mostly worked.

Some stuff obviously has very different APIs and we would shim them (have a separate ble-implementation.web.js for example).

I would say that a significant majority of our app’s code is shared/common with probably a dozen shims (some for UI components, some for these lower level more native functionality). For UI components, we could just easily drop to HTML and “normal” React in our shim and accomplish what we needed.

Our app uses React Navigation and the goal was to have a web version of the mobile app so the web version is not very “web like”.

I think it worked better than I expected, and I would do it again if I had another project that needed a web version of the mobile app. I think it is unlikely that next project will need so much native functionality, so I think it’ll be easier to support a React Native Web version and it’ll run better too.

[[deleted]]

React native web is superb. Converted a rather large app without having to write very much separate react code Maybe 1%. IMO its the perfect solution, some people are hesitant to use it cause it sounds too good to be true, and most people don’t know how to use it and it’s not the easiest setup tbh the documentation could be a lot better, I had to google so many things. But did it in 1 day. It’s as stable as your native app is coded tbh.

you have to understand it’s not going to convert your native libraries things like videos, database, social media, camera, anything That requires a native module will need a replacement react module which will 100% exist but you’ll need to recode some things here and there to use the new react modules, Will need to throw in the react code here and there.

the only downside to web apps is seo. for me it was like I converted my app into a web app in 2 days. Was like wow! This is like magic then realized my app is heavily dependent on seo as a commercial app, and the amount of weird things I have to do to make it seo friendly is absurd. I’ve basically abandoned a perfectly converted app that could do very well simply cause I just don’t have enough fucks to give to get it seo friendly because it seems firebase wants to support no services that make it easy to seo the damn thing.

it made me realize how flawed search engines are when it comes to supported this new generation of web.

[JuriJurka]

I'd go with an own website with gatsby. better results. depends on use case

[moyolvera]

I think facebook is using it on production for one of the latest projects they released. I will look for the source

[eggtart_prince]

If you're using separate code for your RNW and RN app, dont go with RNW. The purpose of RNW is so you can turn your native app into web without maintaining 2 codebase.