ChatGPT on using one React Native codebase for mobile and web apps: promise vs. reality

Most of the contents below are copy-pasted from ChatGPT responses in a very interesting recent chat I had with it: https://chatgpt.com/share/682da650-909c-8013-a534-87ddb38181c8 . [The extracts are from the last parts of the chat.]

React Native Has a Smaller Ecosystem than React (Web)

  1. React (Web) has been around longer (since 2013) and has a huge open-source community building:

    • UI component libraries (MUI, Chakra, Ant Design)

    • Data handling tools (React Query, Apollo)

    • Form helpers, animations, charts, etc.

  2. React Native (mobile) has more constraints:

    • It targets native platforms, not the DOM

    • It requires bridging to native code for many features (e.g., camera, Bluetooth, gestures)

    • Fewer contributors are comfortable working with both JS and native platforms (Java/Kotlin/Swift/Obj-C)

So yes — the volume and variety of high-quality npm packages for React Native is less than for React Web.

But It’s Not a Desert — React Native Has a Solid Core Ecosystem

While smaller, React Native still has many well-maintained, powerful libraries, including:

  • Navigation: @react-navigation/native

  • Forms: react-hook-form, formik

  • Gestures: react-native-gesture-handler, react-native-reanimated

  • Auth: expo-auth-session, react-native-firebase/auth

  • Image/Video: react-native-fast-image, expo-av

  • Camera: expo-camera, react-native-vision-camera

  • Storage/SQLite: @react-native-async-storage/async-storage, expo-sqlite

  • Charts: react-native-svg, react-native-chart-kit

  • Maps: react-native-maps

And Expo packages (expo-blur, expo-file-system, expo-image-picker) simplify access to native APIs without writing native code.

Component Libraries Are Improving Too

Some good UI kits for React Native:

  • NativeBase

  • React Native Paper

  • Tamagui (cross-platform, supports web too)

  • Shadcn (early work in progress for Native)

React Native for Web Helps — But With Limits

If you use React Native for Web or Expo for Web, you can:

  • Reuse your React Native components on web

  • But you can’t just use any React DOM package (e.g., MUI won’t work out-of-the-box)

That’s because React Native uses View/Text, not div/span, and many DOM packages assume HTML/CSS.

============

Promise and reality of using React Native for mobile and web

The Ideal Vision (Marketed by Expo & RN for Web)

“One codebase, three platforms: Android, iOS, and Web.”

  • Use React Native as the base

  • Add React Native Web

  • Use libraries that work cross-platform (e.g., Tamagui, Expo SDK)

  • Write platform-specific code only when necessary (Platform.OS or .android.js, .web.js files)

This can work well for simple to moderate apps — especially if you plan for cross-platform from day one.

The Realistic Scenario for Most Teams

“React Native for mobile, React for web” — two separate codebases with shared business logic at best.

Why?

1. Different UI Expectations

  • Mobile UI is gesture-driven, smaller screens, native patterns

  • Web has mouse/keyboard input, larger layouts, different navigation paradigms

2. Component Compatibility

  • Many React libraries are DOM-focused (use HTML/CSS/Browser APIs)

  • Many React Native components don’t exist on web without a special wrapper (React Native Web)

3. Complex Web Needs

  • Table-heavy dashboards, rich editors, charts, data grids — much easier with React + web ecosystem

  • Hard to replicate that cleanly in React Native Web

4. SEO & SSR

  • If you need SEO (for marketing/public web), React Native Web doesn't help

  • Frameworks like Next.js are much better for SSR and SEO

✅ Recommended Approach (in most real-world projects)

App TypeBest Approach
Consumer mobile appReact Native (iOS/Android only)
Consumer mobile + simple web appReact Native + React Native Web via Expo
Full-featured web appSeparate React (Web) codebase
Shared business logicUse a shared JS/TS library for core logic (optional)

-----------------------

Final Take

You're right:

  • React Native excels at cross-platform mobile (iOS + Android).

  • Web support is promising but not mature enough for many serious web use cases.

  • Having separate codebases for mobile and web is still the more pragmatic and scalable approach for most teams — even if there's some shared logic.

That said, if you're working with a shared UI design and Expo, you can build and maintain a unified codebase for web and mobile — with some compromises.

==== end of chat extracts ====

The entire discussion with ChatGPT was on EAS build,  React Native vs React, Metro/webpack: (public link) https://chatgpt.com/share/682da650-909c-8013-a534-87ddb38181c8 . 

I have captured most of the key points of the above chat in the 20 May 2025 entry in my loooong work-log blog post: Notes on learning stage of developing my own React Native education app using Expo Framework, https://raviswdev.blogspot.com/2025/04/notes-on-learning-stage-of-developing.html . But I felt I should put up a separate post on key points of the React Native vs React web part of the chat and so I have put up this post. 

Comments

Post a Comment