React Native
Monorepo
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.
Exercise 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.
Show example 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.
Test yourself
-
Where does the package name come from in a monorepo?
package.json
- The name field in package.json
- app.json
- turbo.json
- tsconfig.json
Show answer
The name field in package.json — The package name comes from the name field in package.json.
-
Shared package import
import { formatMetric } from '____';
Show answer
import { formatMetric } from '@myorg/utils';
-
Match each folder to its role
- apps/mobile
- RN app
- packages/ui
- Shared components
- packages/utils
- Helper functions
- turbo.json
- Build config
Next lesson: Putting it together
