Building Native Mobile apps with React DOM

In the React world, when you think mobile development you probably think React Native, right? It’s a great project and has been the standard mobile development stack for React developers for years.

But did you know there’s another alternative that React developers are increasingly turning to that might be a better fit for certain teams and projects, especially those using react-dom and with large existing React web apps?

That alternative is Capacitor, a project that runs web apps natively on iOS, Android, and the web with a single codebase. That means, with Capacitor, it’s possible to run standard React web apps on iOS and Android with full native API access, and I’d like to introduce it today and talk about why it’s worth your time and when it might be the right tool for your next project.

React DOM running Everywhere

Today, React web development using react-dom is, by far, the most popular way to use React. According to npmcharts.com and at the time of this writing, react-dom is installed ~80M times each month, compared to 5.4M for react-native.

This makes sense, since React started as a way to build web apps and web developers are the primary users of it.

But when it comes to mobile, these same web developers are faced with the large task of targeting react-native, a non-web environment that may be “React” but certainly isn’t react-dom. There’s no support for standard CSS and many React libraries don’t support it. Chances are an existing React app using react-dom will be a major effort to port to react-native.

Capacitor, on the other hand, is a standard web environment. It can run pretty much any React app using react-dom, but extends it with full access to the native APIs available on iOS and Android, as well as providing a cross-platform API for device features that enables one codebase to run equally well on iOS, Android, and the web as a PWA.

Pair with Next.js/Remix/Tailwind/etc

One side-effect of Capacitor being a standard web environment is that it supports apps built with popular React full-stack frameworks such as Next.js and Remix. As developers adopt these frameworks, being able to build a single Next.js (or Remix, etc) app that runs on the web and natively on iOS and Android is a big advantage.

And, because Capacitor is a true web environment, it supports using CSS frameworks like Tailwind CSS out of the box.

To see how this works, check out some of these starter templates: Next.js + Tailwind CSS + Capacitor, Capacitor + Supertokens + Next.js + Turborepo, and this Capacitor + Remix template.

Popular and Growing

While Capacitor is younger than React Native, it’s widely used today. Capacitor is being used by companies like H&R Block, AAA, Blue Cross and Blue Shield, Wegmans, Lichess, and many thousands of others. Capacitor is the mobile foundation of popular UI technologies like Ionic Framework, Quasar, Konsta UI, Framework7, and others. Capacitor is a great fit for large enterprise companies as well because Enterprise support and features are available, which is unique in the mobile market.

While Capacitor is quite a bit younger than React Native, it’s catching up! Capacitor is installed ~1.5M times each month to React Native’s ~5.2M, and saw considerable growth over the last two years.

Capacitor is a different kind of choice when it comes to picking a mobile technology, because the decision is primarily about investing in standard web technologies instead of a non-standard platform. With that decision made, Capacitor is the natural platform to bring those web apps to mobile.

Getting Started

Capacitor is free and open source (MIT licensed), and Capacitor can be dropped directly into any existing web app (such as any web-based React app).

To get started, follow the Installation guide. Additionally, Capacitor has an official VS Code Extension that can help with installing and deploying your app.

I hope you’ll find that, if you love React like I do, Capacitor is the most “React” way to build a mobile app. There’s no longer any need to leave the web to target native mobile!