Monorepo with Turborepo: Sharing Code Between React Native and Next.js

Insight

A single Turborepo workspace can host both a React Native project and a Next.js web app, allowing you to share TypeScript types, business logic, and even UI components that are platform‑agnostic. By isolating platform‑specific code in src/mobile and src/web while keeping shared pieces in src/common, you avoid duplication and keep your team aligned on a single source of truth. Turborepo’s caching and parallel execution make incremental builds lightning‑fast, even as the repo grows.

Example

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

export const Button = ({ label, onPress }: { label: string; onPress: () => void }) => (
  <TouchableOpacity onPress={onPress} style={{ padding: 12, backgroundColor: '#0066ff' }}>
    <Text style={{ color: '#fff', textAlign: 'center' }}>{label}</Text>
  </TouchableOpacity>
);

// src/web/pages/index.tsx
import { Button } from '@/common/components/Button';

export default function Home() {
  return <Button label="Web Click" onPress={() => alert('clicked')} />;
}

Takeaway

Structure your repo with a clear common folder and let Turborepo handle task orchestration; you’ll get one source of truth, faster builds, and a smoother developer experience across mobile and web.