-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
Three good example starter repositories that will get you up and running quickly, with less config work, is either with Tamagui:
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
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.
-
Navigation: It lacks Solito, so it probably doesn’t attempt to unify navigation across native and web… Which would make you less dependent on React Navigation (which Solito uses), so you could use react-native-url-router which aligns with React Router even for native.
-
react-native-url-router (a single navigation system, using React Router + react-native-screens for stacks + react-native-pager-viewfor tabs).
-
react-native-url-router (a single navigation system, using React Router + react-native-screens for stacks + react-native-pager-viewfor tabs).
-
flutter_platform_widgets
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets
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).
-
PWA can be built in any web framework like Solid, Voby, Vue, Svelte or Qwik.
-
core
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)
PWA can be built in any web framework like Solid, Voby, Vue, Svelte or Qwik.
-
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 style + design system library, a component libTamagui even uses a trimmed version of React Native Web internally, called react-native-web-lite that supports Vite.
-
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.
-
turborepo
Discontinued Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turborepo and Turbopack. [Moved to: https://github.com/vercel/turbo]
NB: "Turbo" also has other meanings in a React Native context, so don't confuse Hotwire Turbo Native with Turbo Modules or Turborepo (as used in create-t3-turbo, mentioned later here).
-
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.
-
turbo
The speed of a single-page web application without having to write any JavaScript (by hotwired)
The default option for Hotwire Turbo apps.
-
By using react-native-turbo, that utilizes turbo-ios (and in principle also) turbo-android under the hood.
-
7. React inside React Native WebView [hybrid]
-
react-native-react-bridge
An easy way to integrate your React (or Preact/React Native Web) app into React Native app with WebView.
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.
-
Navigation: It lacks Solito, so it probably doesn’t attempt to unify navigation across native and web… Which would make you less dependent on React Navigation (which Solito uses), so you could use react-native-url-router which aligns with React Router even for native.
-
create-kaol-app
Kaol Stack - Prisma, Expo, Next, TRPC, Solito, Tailwind - A monorepo template for a truly universal app
create-kaol-app
-
PWA can be built in any web framework like Solid, Voby, Vue, Svelte or Qwik.
-
twrnc aka. tailwind-react-native-classnames instead of NativeWind, comparison. But twrnc doesn't have responsivity + SSR support.
-
Solito (unifies two navigation systems: react-navigation and nextjs/router)
-
Dripsy unstyled UI primitives which are responsive (at the expense of SSR support though).
-
Navigation: It lacks Solito, so it probably doesn’t attempt to unify navigation across native and web… Which would make you less dependent on React Navigation (which Solito uses), so you could use react-native-url-router which aligns with React Router even for native.
-
Auth: it's own authentication setup, since NextAuth is not for native, until further ado.
-
2. React Native + React
-
Use any render library you want: React, Solid, Voby, Qwik, Vue, Svelte etc.
-
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.
-
3. React Native Web (RNW)
-
NativeScript
⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java, Dart). Use what you love ❤️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: iOS (UIKit, SwiftUI), Android (View, Jetpack Compose), Dart (Flutter) and you name it compatible.
8. NativeScript + PWA [hybrid]
-
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.
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Ionic UI toolkit to get native look-and-feel (replicates style of iOS and Android components).
-
4. Flutter
-
Must learn the Dart language.
-
5. CapacitorJS + PWA [hybrid]
