What are the general approaches to build an app that runs both on mobile and on web/desktop?
Let's list them and detail some important factors and gotchas with each approach. You could also skip to my recommendation at the end. There I also compare and suggest some best-in-class starter repos, to quickly get you started.
Note that this article is mostly geared towards (senior) developers and CTO's, although others should be able to get an overall impression from it as well.
In no particular order:
1. iOS + Android + webapp
- 3x codebase. The webapp (HTML+CSS+JS) is not reused on native.
- Must know and use 3 programming languages: Swift for iOS, Kotlin for Android, and JS for web.
- Hiring might be more difficult (specialized/smaller talent pool), as well as more difficult to create a cohesive company skillbase. A shared skillbase is desirable for synergy in knowledge sharing, and for flexibility: easier for all developers to pitch in where it's needed or if someone is sick.
- Must maintain 3 codebases, and keep feature releases in sync. This can be hard, since the difficulty of implementing various functionality can vary across platforms, and developers might have varying skill level and efficiency. So if you want to release the same feature on all platforms at once, you might need to stall a release on one platform (e.g. iOS) while waiting for the implementation be completed on another (e.g. Android). Different times for App Store review process for iOS and Android might also cause delay. Platform specific bugs is another reason the experience may vary across platforms, and for development across platforms to get out of sync (e.g. the Android developer can't work on a new feature at the same time as the iOS developer, due to having to work on fixing a bug in a previous release. Or vice versa.).
- Native features faster: Quickest path to utilizing native features/UX improvements once they are released, no need to wait for a third party implementation. Example: shared element transitions first came to native, then were replicated on the web.
- App startup time is likely faster, since no need to load third party framework (like React Native or CapacitorJS).
2. React Native + React
- 2x codebase (must write and maintain 2 codebases), but "learn React once".
- If using Expo OTA / EAS Update you could push out app updates to all clients immediately, without having to go through the App Store review process (which may take days or up to 2 weeks) or risking that users don't download the update. (But Apple wants you to go through the App Store review process for significant changes to the app, outside of bug fixes etc.)
- React Native can even run on Windows and MacOS too, not only mobile. Even on tvOS and other platforms. See React Native's many platform vision.
- App startup/bootup time with the new Hermes engine that React Native uses is likely fast enough (you can achieve sub-second bootup).
- Native features later: You'll have to wait for RN implementations of new native features released on each platform (or implement them in RN yourself), and potentially also for bugfixes of RN builds. New native features unique to a platform (either iOS or Android) can typically not be utilized until an equivalent feature is available for the other platform (and someone makes a RN library that utilizes the two).
- Monorepo: You could share some amount of code between the native and web codebases, notably: Business logic, state management, some configuration (translation files, TS types, URL endpoints, currency conversion etc.), API calls, formatting request/response data, and authentication. But you would traditionally not share UI Render code (look-and-feel, like: styling, animations, navigation). That would be platform-specific. The benefit is that users on a platform will get a look-and-feel closer to what they are used to. The downside is that look-and-feel across platforms may unwittingly diverge (native mobile vs. mobile web, for instance). That may afford users, who use or switch between several platforms, a more inconsistent experience. The consistency and simultaneous release of new features/UX would also need to be manually kept in sync by developers, which may be challenging over time. But on the other hand, it might be a good solution if you expect your native and web products to intentionally diverge over time. A possible monorepo starter kit with this approach is react-native-universal-monorepo or create-t3-turbo. It should already here be said that modern libraries for cross-platform styling (like Nativewind or Tamagui), and for cross-platform navigation (like Solito or react-native-url-router) challenge the aforementioned traditional principle that you should not share UI Render code (styling, animations, navigation) across platforms. Nativewind or Tamagui have become viable options, even to be used in monorepo approach (with two separate apps; write all components twice). But they realize their full potential if you do choose to share code across platforms (write all components only once), such as with using React Native Web.
3. React Native for Web (RNW)
- 1x codebase, "write React once". RNW could have been called "React Universal", as it can run on many platforms due to React Native. See The case for the React Native Web singularity.
- RNW simply lets you use your React Native components (and app) on the web, by translating
<div>etc. (You're not running the React Native engine on the web, but your components written in the React Native API is simply aliased/translated to be able to work with react-dom which React normally uses on web.).
- Not using React Native Web from the start (if your users "inevitably" want to have a native app) was a famous regret.
- Ecosystem challenge: Most React Native library developers don't necessarily develop with the web in mind, and vice versa. Which can make it hard to find matching components for native and web and writing a consistent wrapper component. There are some React Native packages with known web support (about 166/1142 of the few officially listed as of 2022-10-04). React Native has about 24% the amount of libraries as the React ecosystem. As of 2022-10-05: React Native has 41 615 libraries available on NPM, but React has a much larger ecosystem of 212 722- 41 615 = 171 107 libraries for web. If you're planning on only ever deploying your app to the web, you might want to go with plain React instead for this reason.
- React Native Web is traditionally very SPA focused, and it's
StyleSheet.createsolution is using CSS-in-JS. So some have found it tricky to combine with SSR (for SEO purposes), especially with responsivity through CSS media queries.
- Tip: Use Tamagui for the optimal experience, and SSR compatibility. It solves the aforementioned problem, as it compiles your styling to CSS media queries on web. Tamagui is a lightweight primitive style system, and fully fledged component UI library, that lets you easily create a design system. The community has made tamagui-extras to provide even more components. Tamagui even uses a trimmed version of React Native Web internally, called react-native-web-lite that has a smaller bundle size on web, and supports Vite.
- Use with a cross-platform navigation/routing solution:
- Solito (unifies two navigation systems: react-navigation and nextjs/router)
- react-native-url-router (a single navigation system, using React Router + react-native-screens for stacks + react-native-pager-viewfor tabs).
- Expo Router, upcoming, based on expo-auto-navigation (proof-of-concept / experiment)
- A compromise is only build a base component library with RNW (buttons, headers, cards, etc.). Instead of sharing navigation/routing and styling.
- 1x codebase. Which is 1/2 the work of developing a separate iOS (Swift) and Android (Kotlin) native app. Potentially 1/3 of the work, if Flutter Web works for your use case (as it and can give you a webapp).
- Must learn the Dart language.
- Flutter Web is not suited (according to themselves) for content/document centric apps (or apps requiring SSR/SEO), as it renders everything onto a single Canvas. But Flutter with Flutter Web could esp. be useful for cross-plattform games.
- Full control of rendering. Optimizes for consistent UI cross-platform, at expense of platform-specific capabilities and look-and-feel (that users on each platform might be more familiar with). But has Cupertino widgets for iOS look-and-feel, to alleviate that. (Android uses Material UI widgets). Could also use flutter_platform_widgets that automatically selects the UI widget's look-and-feel according to the mobile platform (iOS or Android).
- Native UI innovations for each platform may arrive later, as they need to be recreated in Flutter.
- "it seems you can overlap native elements on top of a WebView, at least. But only in React Native and NativeScript, and not in Flutter." my tweet
- Flutter vs. React Native vs. Native (iOS) (architecturally).
So, to the various Hybrid-app approaches. They all have ~ 1x codebase since they render a webapp inside a native shell/wrapper app with a Web View (an in-app browser window):
5. CapacitorJS + webapp [hybrid]
- WebView that accesses native API's.
- Ionic UI toolkit to get native look-and-feel (replicates style of iOS and Android components). An alternative is Framework7.
- Webapp can be built in any web framework like Solid, Voby, Vue, Svelte or Qwik.
- You can use NativeScript and NativeScript plugins from Capacitor.
- UX/Performance comparison to React Native, or React Native vs. Ionic React+Capacitor.
- CapacitorJS's little secret is that it will by default bundle your entire webapp into the App Store bundle that users download, so it's not loaded from the web on startup. This to ensure that apps are not rejected by App Store if they don't use enough native features to enhance the app over a webapp the user could have accessed in a browser. Only adding Push Notifications will likely not count as enough native funtionality. Your experience may differ, and you may get through App Store review for a while, only to get rejected later, by a different reviewer. So it's wise to stay on the safe side. But loading the webapp on-demand, and not having to push updates through the App Store would have been preferred DX-wise.
6. Hotwire Turbo Native + webapp [hybrid]
- Native navigation, web content; mix native and web screens.
- Reuses a single shared Web View (WKWebView on iOS, WebView on Android).
- Actually works with other frameworks besides Ruby on Rails (even though it was developed in that context).
- HTML over the wire. Could avoid the need for having a SPA with a GraphQL/REST/RPC API (and having to deal with client-side state management, navigation, etc.). Can use Rails/Laravel/Django for an MPA approach, or Qwik.dev for an SPA+MPA approach if you want to use JS and be cutting edge wrt. SSR and no hydration.
- Hotwire Strada is a standardized bridge that lets you drive native navigation easier through HTML attributes on your page. It was supposed to be released in 2021, but due to some key developers leaving the company Basecamp that authors it, Strada was postponed until 2022, and is not yet released as of 2022-10-12... BUT you don't need to wait for Strada to use Turbo Native today. Update: Strada is now scheduled for release early in 2023...
- NB: "Turbo" confusingly has multiple meanings in a React Native (+ Web) context, so don't confuse Hotwire's Turbo Native with React Native's own Turbo Native Modules architecture, or the monorepo build system Turborepo (as used in create-t3-turbo, mentioned later here) or its recent sister project Turbopack, which replaces Webpack as a bundler for the web (relevant to React Native Web projects).
Two general ways:
- The default option for apps made with Hotwire Turbo.
- turbo-ios and turbo-android are the shell/wrapper apps handling native navigation, written for native iOS and Android. They are provided for you, and works out-of-the-box, but you risk having to fiddle with iOS and Android development for maintenance/debugging later on.
- Limited in navigation modes. You are on your own for custom navigation/transitions.
- Must write any potential native screens/features in Swift for iOS and Kotlin for Android. See how Turbo Native works: Adding navigation bar buttons with Turbo Native (video).
- Likely a faster startup time with these specific native shells (for iOS or Android), than with a React Native shell.
- Turbo Native demo for iOS or Turbo Native demo for Android is the best way to get started, according to DHH (the Basecamp CTO).
- Podcast with lead developer Jay Ohms - 2. Aug 2021, to learn more about the overall approach.
- (If you're using Ruby on Rails and are building a SaaS product, then Jumpstart Rails seems to save you a ton of work, for a decent price, and integrates with Turbo Native. Podcast interview - 23. May 2022.)
- By using react-native-turbo. On github it is called react-native-turbo-demo.
- Can write native screens with React Native. Which is useful if you don't want to have to learn iOS and Android development to make a few screens (as a web developer).
- This would be my preferred Hotwire Turbo Native approach.
7. React inside React Native WebView [hybrid]
- Seems absurd: more often you'd rather use React Native Web.
- But could be useful if you need to quickly port an existing webapp to mobile, for instance to get push notifications on iOS (which isn yet available in Safari).
- Deployment: Could also be useful to get a faster deployment pipeline than via App Store. Though Expo OTA / EAS Update could also do that for an app made in pure React Native (for Web). But then you need to be concerned with that kind of tooling.
- Might be rejected by App Store if the React Native shell app doesn't use enough native features to enhance the app over a webapp. Only adding Push Notifications will likely not count as enough native funtionality. Your experience may differ, and you may get through App Store review for a while, only to get rejected later, by a different reviewer. So it's wise to stay on the safe side.
- Could be used with a webapp made in any web framework / render library, not just one made with React. Although React would allow some reuse of knowledge when working on the React Native shell.
- Shared knowledge, faster to rewrite in full React Native if that need arises.
- react-native-react-bridge is a bridge that makes communication between React and React Native via the WebView easier, so you'd likely want to use that. Alternatively, you could try to ease communication by directly making your WebView and React Native components run each other’s functions.
8. NativeScript + webapp [hybrid]
- Has iOS and Android runtime.
- Allows you to declare the UI with the help of XML-based language and a subset of CSS.
- But for a fully cross-platform app (also on web), you would typically make a webapp and either:
- access native API's through CapacitorJS and use it to bundle the webapp together with the app you ship to the App Store. The app should start up faster, since it has all the assets (JS/HTML/CSS) locally.
- make a NativeScript wrapper/shell app that renders the webapp through NativeScript's WebView. This way, you could ship updates to your app without going through the App Store. But app start up time may be slower, since it needs to download the app assets (JS/HTML/CSS).
- alternatively, NativeScript has some integration with Angular and Vue that could allow you to achieve a great amount of code sharing while also avoiding a Web View.
- Directly running NativeScript on Web is an open issue.
- Some people found it still immature on 2021-04-12. Maybe due to many broken plugins in the ecosystem (Update: take this with a good pinch of salt, see the comments). And one of the earliest and most prolific contributors left on 2022-07-01. (Update: There's controversy here, so see the comments below, where people have shared further insights, to judge for yourself if this seems significant or not.)
- Small community: "For every 1,000 PR’s against Flutter or React Native – NativeScript gets a couple." said the contributor who left.
- Risk? "Since you can't find good NativeScript developers to do the work, nor is there much of a third party eco-system left. It is really a bad idea for any companies to base anything off of NativeScript going forward." said on 2022-07-01 by the contributor who left.
- Open-Native: You can now use React Native UI components in NativeScript. "Open Native is the long overdue Rosetta Stone that allows native modules to be used cross-ecosystem."
9. Xamarin with C# and .NET
- Xamarin forms for simple UIs can share 98% the same code cross-platform. Works quite well, according to Nathan Hedglin in the comments.
- 100% API coverage, which React Native doesn't fully have. So no writing native wrappers.
- For enterprises that already have C# developers and C# backend services, then Xamarin can make sense.
- (Thanks to Nathan Hedglin in the comments for mentioning this possibility and making these points.)
- Allows users on native mobile to access your webapp through its own app shortcut icon from their mobile home screen.
- Not truly cross-platform, but almost. Works wherever the platform has some sort of browser. But the PWA won't use native components/UI on each platform, since it's just made from HTML+CSS+JS. UX might feel less smooth, and app startup time might be a bit slower (as it has to download the app, and potentially run the JS to render it).
- Unfamiliar installation: This won't be a true native app, so it won't be available in the App Store. You could try to guide your users towards installing the app as a shortcut on their mobile home screen, but they likely haven't done that before. Educating the market can be an uphill battle.
- Push notifications: The disadvantage is that you don't get push notifications in Safari on iOS, as Apple has been holding it back for years. Apple has said web push notifications will come in 2023 with a future update to iOS 16. So it would then be available to the amount of iOS users who have upgraded to that version of iOS...
- Use any render library you want: React, Solid, Voby, Qwik, Vue, Svelte etc.
- Webapps have gotten a surprising amount of native permissions acessible from browsers, these days. Even though some features are still lacking.
- You could get your webapp to desktop using Electron or the newer Tauri (which has mobile support coming soon...).
- Listen to the RNR 156: Progressive Web Apps vs. React Native (2020-02-25) podcast episode to get insights from some experienced developers on this choice.
NB: With the rise of tools that can compile to WebAssembly (WASM) that run in browsers, there are more options than those that made the cut for this article (e.g. Blazor WASM (C#), Qt for Web, etc.). For brevity, they were not included, and I'm also unsure how well these WASM approaches fare with respects to SSR and SEO. See my article Notes on the future of WASM and JS.
Obligatory disclaimer: It all depends on your particular use case and requirements, of course. For many usecases, a webapp/PWA would be sufficient. In the same spirit as: "don't build an app if all you need is a site!". But if you build your app as a webapp/PWA, the users eventually typically ask for and expect a native app (a big if, so know your usecase and your users). It can be hard to argue with and educate your market/users, and easier to get adoption if you go with what they are already familiar with.
So in general, to best get started, and avoid redoing work, my recommended place to start for a cross-platform app is with option 3:
React Native for Web.
Because you can have 1x codebase, and there is a lot of developers who know React (and can quickly transfer their skills to React Native) so hiring/employment will be easier. With it, you can also get SSR/SEO for your app on the web, and Expo services like Expo EAS (over-the-air app updates) streamline deployment to native (skip App Store approval process for small updates). A bonus is that since it is basically React Native, you can also deploy the app to native MacOS, Windows or tvOS, due to their many-platform vision.
So, with the general React Native Web recommendation, here are quick ways to get started. Here are some good example starter repositories (repos) that will get you up and running quickly, with less config work. They share styling and most of them also share navigation/routing cross-platform.
If you don't care about selecting the appropriate starter repo according to your specific tech choices (which can require a bit of experience and/or research), then my general recommendation would be to go with:
- create-universal-app (CUA) since it is quite feature-packed, which means the least work to get up and running, to focus on the most important part: your customers' actual needs. See below for what tech create-universal-app includes. In my subjective opinion it has the best choice of technologies amongst the alternatives I've found and listed below.
If you fancy Tailwind CSS, try either of these starter repos:
Please note that "Tailwind CSS has minimal support for animations and zero support for libraries that do not accept CSS classes." -- NativeWind author, Mark Lawlor
- You can even upgrade it to use the Expo Router to get filesystem based routing even on React Native with Expo.
- Like create-t3-app (which is only for web) but for cross-platform as a monorepo through using Turborepo. So you could have several separate apps for various platforms together in the same place (and potentially share some code between them, coordinate versioning etc.).
- NativeWind + Next + Expo (React Native) is also included here.
- tRPC is prescribed as the data fetching solution (to avoid GraphQL hassle and get fullstack type inference)
- Prisma is prescribed as the ORM (which is good, but can be a heavy dependency).
- Navigation: It lacks Solito, so it doesn’t attempt to unify navigation across native and web… Which would make you less dependent on React Navigation (which Solito uses). So instead you could f.ex. use react-native-url-router which aligns with React Router even for native.
- Expo + Next.js, as the other alternatives.
- Auth: it's own authentication setup, since NextAuth is not for native, until further ado.
But I recommend either of the following starter repos that instead of Nativewind use Tamagui for cross-platform styling and UI. Choose the one that is the best fit with the technologies you need, and that includes the fewest technologies in addition to that:
- Tamagui + Solito + Next + Expo Monorepo example. The official starter example. Relatively bare-bones. No tRPC, no Prisma, no built in authentication solution.
- Luna is a monorepo starter repo that has Tamagui + Solito + Next.js, and like the other alternatives is made with TypeScript and React Native Web. But Luna is for those that want a bare React Native setup, since it comes without Expo.
- tamagui-react-native. "A starter kit isolated for Tamagui meant for React Native only." Very bare bones. If you for some reason don't like Expo (please share a comment on why), and if you don't care about rendering to web.
- create-universal-app (CUA) was based off of the create-t3-turbo repo which means it uses Expo and has tRPC and Prisma, but has removed Nativewind in favor of Tamagui for cross-platform UI/styling, and adds Clerk for cross-platform mobile authentication (since NextAuth, now called Auth.js, is still focused on web only). CUA has implemented its own custom cross-platform sign-in page for mobile and web, made with Tamagui. Which could prevent some auth provider vendor lock-in. CUA also has step-by-step documentation + a video tutorial + explains the rationale behind the package decisions. Does not use Expo Router yet, but could easily swap to it in the future, since CUA has universal components. Has a branch that uses Expo Router. See also its Reddit discussion.
The Tamagui and NativeWind ones should work with responsivity and SSR/SEO. But with Tamagui you also get a pre-built component/UI library, a good and customisable design system, plus an optimizing compiler.
Even if you don't need a native app today, you could start by developing a cross-platform app with a focus only on the web, using React Native Web, and React Native libraries (for a good mobile/gesture experience). Then, the path to releasing the native version of your app at any time will be minimal, since it would be sharing nearly all of the code already. Which, if you’re lucky, would mean only hours of work, or more typically a few days work. But in any case it would not take weeks or months of work, which it normally would take to develop a separate native app.
Did I forget a strategy?
How do you feel 2 or more of these strategies compare, based on your experience?
Has PWA's, or any of the hybrid approaches, come so far that they marginalize the benefits of the more native options?
- Using the cutting edge Shared Elements Transitions API + Astro is one such advance.