In this lesson, you will learn how to organize your code to share business logic and UI components across multiple Expo applications within a single repository.
Why use a Monorepo?
As you scale your development, you might find yourself building two separate apps—perhaps a "Customer" app and an "Admin" app—that share the same authentication logic or button styling. Without a monorepo, you would likely copy-paste code between folders, leading to a maintenance nightmare when you need to fix a bug in both places. A monorepo lets you keep all your apps in one place while isolating shared code into a central packages/ directory.
The Directory Structure
In an Expo-based monorepo, you typically structure your workspace like this:
my-monorepo/
├── apps/
│ ├── customer-app/ (Expo project)
│ └── admin-app/ (Expo project)
└── packages/
├── ui-components/ (Shared Buttons, Inputs)
└── core-logic/ (Shared API calls, Auth hooks)
By placing your reusable code in packages/, you can treat them as internal dependencies. Your apps/customer-app/package.json can then reference these packages using local file paths.
How it works with Expo
When you use npx expo start inside apps/customer-app, Metro Bundler—which we discussed in a previous lesson—is configured to look outside the app folder into the packages/ directory to resolve those shared imports. This allows you to write a hook in core-logic and see it reflect instantly in your running mobile app.
This approach ensures that your "source of truth" remains constant. If you update the theme colors in ui-components, both your customer-app and admin-app receive those changes immediately, ensuring consistent branding without the need to manage multiple repositories or complex npm publishing workflows.
By keeping these concerns separated at the file-system level, you avoid polluting your individual app logic with shared concerns, making your architecture cleaner and significantly easier to test.
Key Takeaway: A monorepo allows you to create a "shared" folder for UI components and business logic, enabling multiple Expo apps to consume the exact same code base while maintaining individual project isolation.