Monorepo
- React Native course
- Expert
- Lesson 46/47
- 6 min
Set up monorepo structure and shared packages.
What is a monorepo?
A monorepo keeps multiple packages in a single repository. The app and shared packages live in the same repo. This makes code sharing and version alignment easier. Turborepo or Yarn workspaces are common for React Native monorepos.
Example structure: apps/mobile (the RN app), packages/ui (shared components), packages/utils (helpers). The app uses the shared package with import { Button } from '@myorg/ui'. The package name comes from the name field in package.json. This structure keeps consistency in big teams; each package acts like a separate npm package but they all live in one repo.
Practice Import the shared package
On top of the previous code import the formatMetric function from the @myorg/utils package. Add import { formatMetric } from '@myorg/utils'; at the top of the file.
Starter code
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>Dashboard</Text>
</View>
);
}
const MetricCard = memo(function MetricCard({ label, value }) {
return <Text>{label}: {value}</Text>;
});
function App() {
const [metrics, setMetrics] = useState({});
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>Dashboard</Text>
</View>
);
}
// Import the helper function from the shared packageSample solution
import { formatMetric } from '@myorg/utils';
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>Dashboard</Text>
</View>
);
}
const MetricCard = memo(function MetricCard({ label, value }) {
return <Text>{label}: {value}</Text>;
});
function App() {
const [metrics, setMetrics] = useState({});
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>Dashboard</Text>
</View>
);
}Turborepo and workspaces
Turborepo is a tool that speeds up build and test in monorepos. It offers parallel builds, caching and smart dependency ordering. Yarn workspaces manages the links between packages.
Example turbo.json: { "pipeline": { "build": { "dependsOn": ["^build"] }, "test": {} } }. Here build first runs the build of dependent packages. test runs independently in each package. Turborepo skips building unchanged packages; this is why CI time drops. This tool is the base of expert monorepo management.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where does the package name come from in a monorepo?
package.json- The name field in package.json Correct answer
- app.json
- turbo.json
- tsconfig.json
Explanation: The package name comes from the name field in package.json.
2 Shared package import
import { formatMetric } from '____';import { formatMetric } from '@myorg/utils';Explanation: @myorg/utils is the monorepo package name.
3 Match each folder to its role
| Term | Meaning |
|---|---|
apps/mobile |
RN app |
packages/ui |
Shared components |
packages/utils |
Helper functions |
turbo.json |
Build config |