Sharing UI Components Across React Native and Web with a Monorepo

Insight

A monorepo lets you keep shared UI components, types, and utilities in one place, reducing duplication between a React Native app and its web counterpart. By adding react-native-web and configuring Metro alongside Webpack, the same component can render natively on iOS/Android and as HTML/CSS in the browser. The trick is to abstract platform‑specific differences with Platform.select or conditional imports, so the component stays thin and testable.

Example

// packages/ui/src/Button.tsx
import { Platform, TouchableOpacity, Text } from 'react-native';

export const Button = ({ title, onPress }: { title: string; onPress: () => void }) => (
  <TouchableOpacity
    onPress={onPress}
    style={Platform.select({
      ios: { backgroundColor: '#0a84ff' },
      android: { backgroundColor: '#3ddc84' },
      web: { backgroundColor: '#ff5252', cursor: 'pointer' },
    })}
  >
    <Text style={{ color: '#fff' }}>{title}</Text>
  </TouchableOpacity>
);

Takeaway

Set up a Yarn workspace with packages/ui for shared components, then import them from both the React Native app and the Next.js web project. Keep platform quirks isolated with Platform.select to maintain a single source of truth and dramatically speed up UI consistency across platforms.