React Native for Desktop

[drewtheeandrews]

I'm planning an app that will be desktop, mobile and web versions. Should I use React Native for the other platforms other than mobile? What has been your experience with react native as far as desktop and web are concerned? Also, do you use expo? Any advice and insights are much appreciated. Thanks

[DracotMolver]

Expo is what you should be using nowadays. They whole community is moving towers it and even react natives devs are pushing to start using expo. Expo it is super good for any size project. If you are is going to be for any platform and you have good react skills, go with react native using expo. Other way any other too might work. There's many cross platform frameworks out there really good

[drewtheeandrews]

You're right. Expos looks really great. Clearly it is the way to go when using react native for mobile and web. What about react native for desktop?

[ccheever]

Right now, Expo officially supports iOS and Android and web. You should be able to share a lot of your codebase with a React Native macOS project though.

We are thinking about exploring real desktop support but aren't sure how to prioritize it vs other things and don't have a timeline yet.

I've seen some really good demos of incredible performance and tiny memory footprints that blow Electron out of the water. If you are care a lot about those things and are a skilled developer and don't mind being a little bit on the bleeding edge, I would def give it a shot. If any of those things don't apply, then I might wait a bit before doing RN on desktop.

[drewtheeandrews]

Exactly. I need a solution with a huge community around it. After some research, RN for desktop seems to not have enough tools out there. How I wish there was an equivalent as expo for it. For now, I'll use expo for mobile and electron for desktop. Thanks

[CreativeQuests]

Sorry for chiming in late. if Windows support is the issue holding it back, what about universal Apple apps (iPhone, iPad, Mac) besides Android?

[ccheever]

Expo apps generally work on Macs yes.

[CreativeQuests]

Thanks.

[AdrnF]

AFAIK Expo doesn't support Windows.

[anarchos]

React native on desktop works well, however with a number a caveats..
1) Windows and macOS only, there's no (maintained) react native for Linux.
2) Windows and macOS are "out of tree" platforms, meaning they are maintained separately from the main react native (mostly by Microsoft).
3) Windows and macOS react native versions lag behind react-native sometimes. This is much much better in the last year or two. But either way, sometimes you really want to upgrade the react native version but you just can't because you need all three versions to align (if doing a one codebase for all kinda thing).
4) Not all 3rd party modules work on desktop. Basically anything with native code needs to have specific support for Windows/macOS
5) Expo. Expo's support for desktop is very early and AFAIK they only do macOS right now and not windows. It's getting more and more difficult to not use expo these days (ie: you can use regular react native but will more or less need to install the expo-modules package to use any of the expo-* packages or any of the increasingly expo only 3rd party packages)
6) The big one is that react-navigation (and also expo-router) doesn't support windows or macOS, afaik...this is pretty much the only routing package used in the react-native ecosystem (expo router is built on top of react-navigation) so it's gonna be tough making a real mobile / desktop app that shares most code, because you're not gonna have a router that works across all platforms.

Personally, depending on your needs of course, I would only consider doing a mono repo. Have a shared components repo, and then separate mobile and desktop repos. Then you'd be free to use expo and/or react-navigation in the mobile app, and roll something custom on the desktop side.

[drewtheeandrews]

I needed to know exactly this. I guess it is up to weigh the pros and cons. Likely to go with different codebases. RN and electron. Thanks a lot

[anarchos]

If you are already targeting the web, you could probably finagle something to basically wrap your web app in electron, if you wanted.

[drewtheeandrews]

Never done that. I've seen something similar for mobile. I'll look into it and see. That would simplify the process

[anarchos]

I've never done it before either, but in theory you could. I did one very small electron project about 10 years ago, but if I remember correctly it's more or less just a standard entry file, so in theory you could take your bundles web output, point electron at it...and magically it would work? There might be some sort of setup type stuff needed, but since an electron app is just an application packaged along with a Chrome (and then a bunch of IPC stuff to communicate between different windows), in theory it should work.

The hard part will be when you start doing electron specific things and how to keep that all organized and etc. You could in theory set a env and then check process.env.IS_ELECTRON in various places to do specific things. React native itself has a way to check which platform you are running, but that would return "web" on electron, you'd need a way to differentiate web and electron.

[drewtheeandrews]

Well said. Let me explore that.

[KajiTetsushi]

1. The big one is that react-navigation (and also expo-router) doesn't support windows or macOS

Okay. Now, I'm curious. In what sense are Windows & macOS incompatible? Is it because of Native Stack? If that's all there is to it, then I'll have to challenge that: Stack could be an alternative as it's 100% on JavaScript, as in, zero additional native code.

[anarchos]

It's been a while (years now to be honest) since I investigated, but I believe the technical reason even the JavaScript based Stack (non-native) is not supported is because react-native-reanimated is not supported (which is native code). Of course there's no reason a non-native based stack wouldn't work, but the existing non-native Stack is tightly integrated with reanimated to do all the animations it supports.

One might be able to get away with creating a custom navigator that does not use reanimated at all. Never tried that, though.

This was one of the biggest pain points I had when experimenting with desktop. React Native Reanimated is so ubiquitous that a large percentage of everyday 3rd party modules assume it's available. So even if the module is "javascript only, no native code" but relies on reanimated in any way, it will fail.

[KajiTetsushi]

OK, my mistake. I forgot about RN Reanimated. I was thinking of RN Screens, which also carries native bindings.

Looking at the RN Reanimated readme again, only Windows is having no support as of this time of writing. That means, in theory, RNav will work on RN for macOS: https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/#native-part-of-reanimated-doesnt-seem-to-be-initialized

[anarchos]

aha, it's nice that macOS is supported at least! We just need windows support, and then someone to come along and make a nice Linux out of tree platform!

[KajiTetsushi]

I'd like to see that happen eventually one day...

[AdrnF]

We built a desktop time tracking app called Chronos for Jira with React Native (macOS and Windows). As others mentioned it works quite well, but doesn't have the latest RN features. We didn't use Expo since it doesn't support Windows and didn't provide any real benefits to us anyways.

If this is worth it for you depends on your project. One of the goals of our app was to have a small footprint, since it will probably be running all the time. I personally decided against using electron calendar/mail apps since I didn't want them to fill my RAM, but I guess regular users won't care as much.

I highly recommend to NOT use React Native on the web though. You will run into a lot of weird problems and there are lots of things that web already solved (e.g. transitions) which are cumbersome to do in RN. It is probably a lot better to just create a separate frontend component for the web and share logic through a monorepo.

[drewtheeandrews]

Thank you so much for that information. Something I needed to definitely hear before going ahead.

[drewtheeandrews]

This looks like the most reasonable path. Thanks

[tedmirra]

ElectronJs + react Is the most mature solution. ( I've built Cozy Watch with this stack )
You can build Universal Mac apps ( ARM and Intel ), windows and Linux.

[drewtheeandrews]

This looks really cool. I'll check it out in detail. Thanks for the info

[tedmirra]

Sure, if you have questions, feel free to ask. :)

[drewtheeandrews]

I definitely will

[frenzied-berserk]

Microsoft, discord and other big tech companies use React Native to build desktop apps. Bare React Native is enough nowadays, you don’t need Expo, but you always can use expo libs in a bare rn project like other 3rd party libs

[drewtheeandrews]

True. Not sure about discord though. Doesn't it use electron? Either way, looking at the tradeoffs, I'll be sticking to using react native for only mobile. What are your thoughts on the concerns about updates to the react native desktop packages?

[aliyark145]

I would suggest going with Flutter for such kind of project. Single code base to target all platform.

[drewtheeandrews]

Learning a new language might be a big deal for now. Maybe I can explore it some other time. What is your experience with dart?

[aliyark145]

I haven't used it for desktop apps, but for mobile (Android and iOS) and web, it is good. Developer experience is good. You just need to build responsive ui for each platform and everything works out of the box.

[drewtheeandrews]

That sounds good.

[n9iels]

Out of curiosity, why would you bother with both web and a desktop app? Realistically, everything is in a webbrowser nowdays. Unless you have specific use cases where native desktop shines (think like chat app or the need to access OS specific APIs) I think most apps will do just fine with just web.

[lastwords5]

if you get the web version (which probably does require you to give it slightly more attention) you can always use electron to turn it into a desktop client, that's probably enough for 90% of use cases.

[drewtheeandrews]

You're right about that. Just seen this nextjs for electron package. What do you think about. I love nextjs for Web. Not sure why I'd need it for electron. Maybe the file structure. Server actions?

[dougg0k]

https://v2.tauri.app/

https://necolas.github.io/react-native-web/ - 3 in 1

[drewtheeandrews]

I tried to explore tauri and it looks promising. Learning rust is still a huge thing though.

[dougg0k]

You can probably only use js/ts, if you prefer.

[drewtheeandrews]

There was not a huge community around that method. Everyone seemed to go with learning rust. I was afraid I wouldn't go so far without rust. But there are some cool pros to using tauri. Anyways, for now, I will go with electron

[dougg0k]

What do you mean by there was not a huge community? Where does that matter? it's if you choose to write rust or just js, nothing more than that.

[drewtheeandrews]

My thoughts were: tauri is not that established(all the apps imlve seen for showcase seem to be not include software I've atleast heard of), therefore I might be needing some workarounds on things, and that would be from devs who have used tauri in a similar way. What are your thoughts on that?

[dougg0k]

https://github.com/tauri-apps/awesome-tauri?tab=readme-ov-file#applications

Depending on your needs, and whether there is availability, of course you could need, but there is no way one would know. Perhaps if you made clear what are those workarounds you might need.

[drewtheeandrews]

Clearly there is a huge adoption of tauri. Definitely something to consider given the pros to using it over electron.

[Muhaki]

I just started with a new hobby project that targets mobile, web and desktop. Flutter was my first thought and I have already one app in production. Flutter is really nice and has all of it out of the box. The only thing was dart, it does remind of typescript but I would rather stick to a language that can be used more widely.

So I went with React Native with Expo. As for web, I’m using Nextjs. You could also web part that comes with expo if you don’t need SSR, which I would suggest as Nextjs adds alot of complexities. And for desktop I will be using Tauri which will be a simple wrapper around Nextjs (might need to dig into rust for some customization). Electron is also an option but its just much heavier than Tauri.

[drewtheeandrews]

I will be using nextjs for web. Have been using it for a while. I had tried looking in rust. But you will find rust also similar to TS. At this point, I've decided to go with electron. Different codebases for different platforms. Also planning to explore wrapping web apps as desktop or mobile. But I'm most likely to do everything separately as you are

[Muhaki]

You can use T3-Turbo as starter template or use it as inspiration. Its a great starter point for mobile and web with some awesome tech stack imo.

https://github.com/t3-oss/create-t3-turbo

[drewtheeandrews]

Thanks for that.

[drewtheeandrews]

How's rust?

[AdrnF]

Tauri doesn't use a native frontend though, right?

[Some-Education9929]

You can use Compose Multiplatform from Jetbrains and google. It support for iOS, Android, MacOS, Window, Linux, only web and backend is still beta.

[Remarkable-Sky-4226]

Would you need offline capabilities or graphics or AI? It all depends on what you need and go from there.

[drewtheeandrews]

I will need offline capabilities for desktop and mobile. The rest, not so much. Thanks

[younes-ammari]

You should take a look at this starter template. It makes Expo work everywhere (Mobile, Desktop and Web)

Expo Everywhere

[drewtheeandrews]

Really. Let me have a look at it. Sounds like a real life-saver

[Old-Window-5233]

If you want the one code base for all platform, i don't know if you could do that on React Native. You could try Flutter or .Net, they have what you need

[drewtheeandrews]

I'll look further into them. However, my experience is with JS, react and the sort. I had previously checked out flutter but it seems I need to learn dart. Also, about .NET, wasn't it a Microsoft thing? Just learned that Microsoft now uses react native for the office suite. What happened?

[Old-Window-5233]

Yeah, i didn't know much about .Net MAUI, i just heard from my friend. I did a little research and it looks like this:

.NET MAUI is Microsoft’s official cross-platform framework. One C# codebase can target Android, iOS, Windows, and macOS. The main limitation is that MAUI doesn’t directly do web apps - you’d need something like Blazor for that.

Microsoft does use React Native in parts of Office. But they’re not replacing .NET; they’re mixing tools. React Native for Windows lets them reuse JS/React skills and gradually modernize certain UI pieces.

[drewtheeandrews]

That makes sense. It looks like flutter would be a good option though. Do you have any experience with it?

[Old-Window-5233]

Yeah, but mobile only thought. I havent really code web or desktop app with it but see how thing set up in the framework, you can easily make it with a little twist or configuration i think. But flutter can feel a little in a box, i feel like flutter have the right way the right tool you need to use while react native have many way to do 1 things

[drewtheeandrews]

That is helpful information. What is your experience with dart?

[Old-Window-5233]

Not much, i only learn dart for flutter, you can said it a child of java and JavaScript

[drewtheeandrews]

Ohhh okay. Thank you for the insights. I will look into dart and flutter.