Guidance on Monorepo with React (Vite) and React Native + New Architecture

[Nirav049]

Hello React Native team and community,

I'm architecting a new project based on a monorepo strategy. The goal is to have a React + Vite web application and a React Native mobile app sharing as much code as possible.

I'm particularly interested in how to best structure this while adopting the New Architecture, and I'm looking for guidance on the specific challenges posed by integrating Vite and Metro (React Native's bundler) in a single project.

My Core Requirements
My specific architectural goals are:

1. Maximum Code Reuse: A central packages/ui or packages/shared directory containing components, hooks, and logic that are imported and used by both the Vite app and the React Native app.

2. Unified Dependency Management: A single, root package.json using npm/yarn workspaces to manage a shared node_modules for the entire project, ensuring dependency versions are consistent.

3. Seamless DX: A smooth developer experience where a single component file (e.g., Button.tsx) can be written in a platform-agnostic way. It should render a on the web via Vite and a native equivalent on mobile via Metro, ideally handled by a tool like react-native-web.

4. Shared Tooling: The stack will use a common Django REST API. For styling, the goal is to use Tailwind CSS for the Vite web app and a compatible library like nativewind for the React Native app, preferably using the same tailwind.config.js.

5. Unified Build Scripts: From the project root, a command like npm run build should trigger both vite build for the web (outputting to /dist/web) and the necessary bundling/build process for the mobile app.

My Questions for the Community
Given the use of Vite, my questions are a bit different:

1. Vite + Metro Integration: What are the best practices for configuring a monorepo where the Vite dev server and the Metro bundler must coexist? Specifically, how do you handle module resolution, asset management, and Hot Module Replacement (HMR) so they both work correctly?

2. Tooling for Abstraction: Are frameworks like Solito considered the gold standard for bridging a Vite frontend with a React Native app? How do they simplify the configuration differences between vite.config.js and metro.config.js?

3. New Architecture Impact: How does the New Architecture (Fabric, TurboModules) influence a Vite + React Native setup? Are there specific considerations for aliasing react-native to react-native-web in vite.config.js that might conflict with how Fabric or TurboModules work?

4. Example Repositories: Can anyone share links to up-to-date starter kits or production-level examples that successfully implement a Vite + React Native monorepo, especially ones that have the New Architecture enabled?

Thank you for your invaluable insights!