This monorepo showcases React Strict DOM (RSD) with Expo and Next.js App Directory (RSC). It provides a powerful combination of technologies without relying on react-native-web for Next.js integration.
The monorepo includes the following key packages:
- React Strict DOM
- Expo SDK 50
- Next.js 14
- Expo Router 3
- Jest
The monorepo follows this directory structure:
-
apps
: Contains entry points for each applicationexpo
: Expo applicationnext
: Next.js application
-
packages
: Contains shared packages used across applicationsapp
: The main package from which most files are importedfeatures
: Organizes code by feature
To start the applications, follow these steps:
-
Install dependencies by running bun install
-
For Next.js local development:
- Run
turbo dev --filter=next
to start the Next.js development server
- Run
-
For Expo local development:
- First, build a development client on your device or simulator:
- Navigate to
apps/expo
directory - Run either expo run:ios or eas build
- Navigate to
- After building the development client, from the root of the monorepo:
- Run
expo start --dev-client
to start the Expo development server
- Run
- First, build a development client on your device or simulator:
The monorepo utilizes a single root-level configuration for common tasks such as type checking, linting, and formatting. Install the turbo
command globally and run turbo [command]
to execute the desired script.
turbo test
: Runs all tests, including type checking, linting, and formattingturbo typecheck
: Performs type checkingturbo lint
: Runs the linterturbo format
: Formats the codebase
Using a single root-level configuration with scripts in the root directory offers several advantages:
- Running a single process is significantly faster compared to running multiple processes in parallel.
- Although Turborepo can mitigate this issue through caching, the cache is often invalidated when making changes to shared packages.
- In a per-package setup, dependent shared packages need to be type-checked multiple times, leading to redundancy.
- In real-world scenarios, running commands in the entire repository does not introduce performance bottlenecks.
- Opening the project in VSCode from the root directory works seamlessly without the need for VSCode Workspaces.
- Having a single root-level configuration eliminates the need to install and configure tools like ESLint for each package individually.
There is a bug in StyleX Next.js Plugin preventing production builds. A fix is being worked on in this PR. Until this issue is resolved upstream, production builds will fail to build.
The package.json file includes the following resolution:
"resolutions": {
"schema-utils": "3.3.0"
}
This resolution is required because expo-router
depends on schema-utils
, which in turn depends on ajv^8
. However, eslint requires ajv^6
, causing dependency mismatches. To resolve this issue, the version of schema-utils has been downgraded instead of directly adding resolutions to ajv due to breaking changes between the versions.