Sharing UI Components with Yarn Workspaces in a React Native + Web Monorepo

Insight

A monorepo lets you co‑locate React Native, Expo, and Next.js projects while sharing a common ui package. Yarn workspaces handle dependency hoisting and symlinking automatically, so a component written once can be imported in both mobile and web bundles without Babel or Metro tricks. The key is to keep the shared UI library framework‑agnostic—use only React primitives and style it with Tailwind or StyleSheet‑compatible utilities.

Example

// package.json at the repo root
{
  "private": true,
  "workspaces": ["packages/*"]
}

// packages/ui/Button.tsx
import { TouchableOpacity, Text, StyleSheet } from "react-native";
export const Button = ({ title, onPress }: { title: string; onPress: () => void }) => (
  <TouchableOpacity style={styles.btn} onPress={onPress}>
    <Text style={styles.label}>{title}</Text>
  </TouchableOpacity>
);
const styles = StyleSheet.create({
  btn: { padding: 12, backgroundColor: "#0066ff", borderRadius: 4 },
  label: { color: "#fff", textAlign: "center" },
});

// apps/mobile/App.tsx
import { Button } from "@myorg/ui";
// works the same in apps/web using Next.js

Takeaway

Set up a Yarn workspace once, place reusable components in a ui package, and import them everywhere. This eliminates copy‑paste UI bugs and guarantees consistent look‑and‑feel across all platforms.