Documentation
Quick start
With Expo（React Native）

Usage with Expo（React Native）

Example code: https://github.com/tsdk-monorepo/tsdk-quickstart/tree/main/expo-app (opens in a new tab)

Expo and pnpm monorepo tips

With pnpm workspace, expo project need do addtional settings.

Create .npmrc

.npmrc
node-linker=hoisted

Create metro.config.js

💡
The 6th line code, is the child project folder relative the root.
expo-app/metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { FileStore } = require('metro-cache');
const path = require('path');
 
const projectRoot = __dirname;
const workspaceRoot = path.resolve(projectRoot, '../');
 
const config = getDefaultConfig(projectRoot);
 
// #1 - Watch all files in the monorepo
config.watchFolders = [workspaceRoot];
// #3 - Force resolving nested modules to the folders below
config.resolver.disableHierarchicalLookup = true;
// #2 - Try resolving with project modules first, then workspace modules
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
];
 
// Use turborepo to restore the cache when possible
config.cacheStores = [
  new FileStore({
    root: path.join(projectRoot, 'node_modules', '.cache', 'metro'),
  }),
];
 
module.exports = config;

Update tsconfig.json, add path alias

expo-app/tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Update app.json, add path alias expo support

expo-app/tsconfig.json
{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    },
    "name": "expo-app",
    "slug": "expo-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Create index.js

expo-app/index.js
import { registerRootComponent } from 'expo';
 
import App from './App';
 
registerRootComponent(App);

Update package.json

expo-app/package.json
{
  "name": "expo-app",
  "version": "1.0.0",
  "main": "index.js"
  ......
}
🚫

If met error:

TypeError: g.on is not a function

It's because the pnpm monorepo not set correctly, follow the above steps will work.

💡
More expo monorepo information: https://docs.expo.dev/guides/monorepos (opens in a new tab)
With React QueryCode repository