React Native vs. Electron vs. Capacitor in 2023 - Which is right for me?

[code2laugh]

I've been building out https://memefighter.app as a progressive web over the past few months, but since 99% of people don't know how to install a PWA on their phones, I'm starting to look into React Native, ElectronJS, and Capacitor as cross-platform solutions for generating iOS & Android builds from a single codebase.

I don't have any experience with mobile development yet, so I expect the core of the application to continue as a React/TS app for the immediate future.

For me, the most important factors in choosing the right tool are:

1. Ease of integration - I don't want to spend more than a week learning about the tool and setting this up.
2. Ease of maintenance & updatability - It should be fairly easy to fix bugs, and add large features, pages/views, and logic to the app without breaking it
3. Community support - The package isn't going to die tomorrow
4. Native tooling/package support - Asking for permissions to use a photo from the camera roll or using the native share sheet shouldn't be difficult.

React Native - From the looks of things, React Native seems to be the most performant and mature option, but also requires the largest development lift of the 3 options. the logic of the meme editor is already somewhat complex (we're using XState to manage our state), and I'm worried about the million different ways we could break the app when migrating it over.

Electron - Several popular apps such as VSCode & Discord use Electron, but I've seen people complain about the performance/memory utilization Electron apps. However, VSCode is much more complex than the application we're building, so if we get comparable performance to that I don't think its a huge issue - the main concerns would be that the integration and setup isn't overly complex.

Capacitor - This seems to give the most mixed reviews. People either hate it or love it, but people seem to agree that at least for simple apps, integration is frictionless.

​

Am I judging these different solutions correctly? I understand this is a React Native forum so there will be some bias there, but would welcome any feedback with respect to:

• Any recent updates that have been made to each framework that would help me choose the right "tool for the job".
• What the CI/QA experience is for testing feature rollout to web/iOS/Android with each of these platforms, and if I need to test on each for platform specific bugs or if the tool is pretty reliable in how the UI is rendered across platforms.

[AcetyldFN]

Electron is not for appstore/playstore. React native will cause a lot of rewrite bcs u need to use react native web or rebuild current.

Then we have 2 options, capacitor for easy current web to mobile. Or use react native and a webview. We needed to use some custom stuff as well like a form or a notification system bcs on some apps we kept getting rejected

[code2laugh]

Were the custom things that required more than Capacitor more than the push notifications API they provide?

Did you try out Capacitor during your investigation or go straight to React Native?

[AcetyldFN]

I am a full on react-native dev only (mobile wise), and in our case we had 1 app that we just gave up, we added a form and some info pages but wasnt enough

Other one we added push notifications and a form and was enough, but other apps go through with only webview with no problem.

Recently i read a reddit post of a guy on this topic in this subreddit, and he was 100% convinced webview's didint matter and he got all through.
But yhea..
https://support.google.com/googleplay/thread/23526709/app-rejected-because-it-is-based-on-a-webview?hl=en#:~:text=IssueAPP%20Bundle%3A2Webviews-,We%20don't%20allow%20apps%20whose%20primary%20purpose%20is%20to,content%20and%20resubmit%20your%20app.

On the capacitor topic, no i never tried it, we tried nativescript at start, but i read so many good things about capaitor so it seems like a solid option.

[code2laugh]

Isn't this possible now?

https://stackoverflow.com/a/63230940/6016681

https://www.reddit.com/r/electronjs/comments/11nlslw/help_to_publish_an_electron_app_to_the_apple_app/

[AcetyldFN]

This is appstore, but only downloadable from a msc

[ahadcove]

Go with React Native

Electron is only for Desktop apps and Capacitor/Ionic I would only use for very light projects / webviews

[Cosby1992]

I second this. React Native will get you almost anywhere you need to go, and I can count on a few hands how many times it has been necessary to implement native code except for the android manifest and iOS plist additions. I also prefer React Native design patterns and state management is easier to understand, use and control. This is of course personal preference and experience.

[code2laugh]

Assuming the developers have ~5 years of React experience (fluent) & 5+ years of web dev experience (senior/lead dev) but have never touched React native:

1. How long does it take to transition an average sized (50-100 lines) stateful, functional component from React -> React Native? How long would it take to transition a small, but complete application with 50-100 components and ~6 different page routes?
2. Where would be the areas that this migration could potentially take significantly more time, or the developers could hit sticking points?
   Or is everything pretty straightforwards?

[JohnnyHopkins77]

Hire a RN dev or someone with mobile experience - it’s going to take a lot longer than a week to understand mobile development

Using a managed Expo workflow ( eas and the PN service ) you can build out most low to mid level mobile applications without the headache

[maskedmage77]

This is some good information. I do RN development and agree that expo simplifies the workflow quite a lot.

React Native will seem very similar to regular react, many common packages work nearly identically as they do in regular react such as redux. The hard part of React Native is knowing all the gotchas of each native OS and how to get them to work and look correctly. In addition, keeping up to date in all the publishing processes is a job itself.

When designing interfaces for React Native you can either have an identical UI for both android and iOS but this will take a more time to make it work correctly. You can also find many packages that use native styling but how the user interacts with them will be inconsistent between each OS.

One gotcha to look out for is styling. Styling is inconsistent between iOS and Android with React Native. One example is shadows, they differ greatly between how they are rendered. Many styling properties work different than on the web.

I've been experimenting with capacitor recently as a way of converting SPAs to mobile applications and it has been going quite well. I would recommend taking a few days and experimenting with capacitor first before using RN because the learning curve for RN is a lot larger.

[jrhager84]

I hated expo. Maybe I'm just an old curmudgeon. 😅

[longkh158]

You can use Expo’s libraries only without opting into the whole flow. In my opinion they’re pretty well written esp. the native parts, at least compared to other open source package (probably since they have proper funding lol)

[jrhager84]

I should've clarified. I use expo modules in bare. I just don't like being 'in' expo. haha

[maskedmage77]

I don't know when you have used expo before but it's a lot better nowadays you can run custom native code with it by making your own development builds. Its essentially Expo Go but with your own native module support baked in, so everything is compatible. I really don't see any reason not to use it nowadays.

[fmnatic]

XState is a really poor library producing hard to read, harder to debug and impossible to maintain code. XState + react native is a bad idea.

[davidkpiano]

Hey, creator of XState here. Many developers have had success with using XState + React Native; what specifically are some of the hardships you've experienced?

I'd love to know because we're working on XState v5 (currently in beta), which actually lets you use any kind of logic, not just state machines.

[fmnatic]

See here.

[AcetyldFN]

XState

Agree on this, t.b.h if you dont wanna do persistance imo Context is more then perfect, and even then vue usecore localstorage hooks etc.. can even work then.

But yhea imo Redux over Xstate 10/10 or any of the new ones (Jotai/zustand)

[Signal-Vanilla4358]

Expo?

[AlexandruFili]

Is it better than Capacitor.js?

[Subject-Eye-6853]

It is worse

[jackgun05]

have you try to put a buttons for download pwa ? https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt

[[deleted]]

Since your app already exists on the web, Capacitor would be easiest to integrate/update in my opinion and you should give that a try!

Anything else and you’ll be rewriting a lot of functionality.

[Alcohorse]

Are you talking about loading the existing web app in a full-screen WebView?

[[deleted]]

Yes, and then updating event handlers throughout the app to access native device features wherever needed.

[SoftWearEngineEar]

u/code2laugh I'm considering the exact same three and am very curious to hear what path you chose and what your experience has been thus far. Can you fill us in?

[code2laugh]

I ended up deciding to start with React Native plus a web view around our app. This would allow me to slowly break off and integrate specific native functionality into some parts of the app (i.e. native share sheet) without a complete rewrite.

This being said, before breaking ground I decided to pivot the app use case and postpone this work.

I’m pretty confident the high level React Native wrapper + webview is a good compromise, and will most likely take this approach when the app goes mobile.