Cross-Platform Development: Sharing Code Between Mobile, Web, and Desktop

Building separate native applications for iOS, Android, web, and desktop multiplies development cost and maintenance burden. Cross-platform code sharing strategies can reduce this overhead dramatically—sharing 60-80% of application code across platforms while still delivering platform-appropriate experiences. This article examines the technical approaches, architectural patterns, and tooling that make multi-platform code sharing practical for production applications.

React Native Web: Mobile-First, Web-Compatible

React Native Web implements React Native's core components (View, Text, Image, ScrollView, TextInput) as web equivalents. A component written with React Native primitives can render natively on iOS and Android and as standard HTML elements on the web. This is not a theoretical capability—major applications including Twitter, Flipkart, and Uber Eats use React Native Web in production.

The key to success with React Native Web is disciplined use of the React Native component API rather than reaching for platform-specific modules. Replace any direct DOM manipulation with React Native equivalents. Use StyleSheet.create for styling—these styles translate to optimized CSS on the web. Platform-specific code should be isolated in .ios.ts, .android.ts, and .web.ts files, allowing the bundler to include only the relevant implementation for each platform.

Navigation is one area requiring platform-specific handling. React Navigation works across React Native platforms but does not provide web-appropriate URL-based routing. Use a shared navigation configuration with platform-specific router implementations—React Navigation for mobile and a web router (like React Router) that maps the same screen structure to URL paths.

Expo: Unified Development Platform

Expo has evolved from a managed React Native environment to a comprehensive development platform supporting iOS, Android, and web from a single codebase. Expo Router provides file-system-based routing that works across all platforms with automatic deep linking and URL support on web. This eliminates much of the navigation complexity that traditionally plagued cross-platform codebases.

Expo Modules API allows creating custom native modules that work across platforms with a unified TypeScript interface. EAS (Expo Application Services) provides cloud builds, over-the-air updates, and app store submission from a single pipeline. For teams that want to maximize cross-platform sharing without managing native build infrastructure, Expo offers the most streamlined path.

The limitation is access to certain native APIs that Expo does not yet support. The development build workflow mitigates this—you can add any native code through Expo config plugins while retaining the Expo development experience. Evaluate whether your specific native requirements are supported before committing to the Expo ecosystem.

Desktop via Electron and Tauri

For applications that need desktop presence alongside mobile and web, Electron wraps your web application in a Chromium shell with access to Node.js APIs for file system access, system tray integration, and native OS notifications. The shared web codebase runs unchanged in Electron with platform-specific features added through Electron's IPC (Inter-Process Communication) mechanism.

Tauri is a lighter-weight alternative that uses the operating system's native webview instead of bundling Chromium, resulting in dramatically smaller application bundles (often 5-10MB versus 150MB+ for Electron) and lower memory consumption. Tauri's backend is Rust, providing excellent performance for system-level operations. The trade-off is that rendering behavior may vary slightly across platforms due to different webview engines.

Monorepo Architecture for Code Sharing

A monorepo structure is essential for effective cross-platform code sharing. Organize shared and platform-specific code into packages: a core business logic package, a shared UI component library, platform-specific application packages, and shared utility packages for API clients, validation schemas, and type definitions.

Tools like Nx, Turborepo, or pnpm workspaces manage the monorepo's dependency graph, build orchestration, and caching. Define clear package boundaries: the shared packages should have zero platform-specific dependencies, while platform packages import shared code and add platform-specific implementations. TypeScript path aliases or package.json exports field ensure clean import paths across packages.

State management, API integration, and business logic are the highest-value sharing targets. Libraries like Zustand, Jotai, or TanStack Query work identically across React Native and React web environments. Data validation with Zod, date handling with date-fns, and form management with React Hook Form are all platform-agnostic and should live in shared packages.

What Not to Share

Not all code should be shared. Navigation, platform-specific UI patterns (bottom tabs on mobile, sidebar on desktop), animation implementations, and native module integrations should remain platform-specific. The goal is sharing business logic and data management—approximately 60-80% of typical application code—while allowing each platform to deliver its expected user experience.

Multi-Platform Solutions at Nexis Limited

We architect cross-platform solutions that maximize code reuse without compromising platform quality. Our Digital Menu product demonstrates this approach, running seamlessly across mobile and web from a shared codebase. Explore our mobile development services or contact us to plan your multi-platform strategy.