Step-by-step guide to setting up a React Native monorepo using Yarn workspaces that supports both mobile and web applications. Covers project structure with apps/ and packages/ directories, configuring Yarn workspaces with node-modules linker, Metro bundler setup for hoisted dependencies, iOS CocoaPods and Android Gradle adjustments, shared TypeScript configuration, and creating cross-platform UI packages with platform-specific file extensions (.native.tsx). Includes a practical example of a shared Button component consumed by both a React Native mobile app and a Next.js web app.
Table of contents
What is a monorepo?Why use a monorepo in React Native?Workspace strategySetting up Yarn workspacesCreating the React Native applicationReact Native configuration for monoreposTypeScript configuration for a monorepoSetting up shared packagesSetting up a web projectUsing shared UI across platforms Summary and next stepsSort: