React Native Skia not working on installing

[elevyg]

Summary App crushes after doing npx expo install @shopify/react-native-skia

The error is Unable to resolve module scheduler/tracing, I read that its a misconfiguration between React and React Native.

My project is a monorepo and has React 18.0.0 and React Native 0.69.5 as dependencies. I tried nohost on react and react native but didn't work.

expo-app:dev: [18:25:03] node_modules expo-app:dev: [18:25:03] ../../node_modules expo-app:dev: [18:25:03] 18 | var _assign = require('object-assign'); expo-app:dev: [18:25:03] 19 | var Scheduler = require('scheduler'); expo-app:dev: [18:25:03] > 20 | var tracing = require('scheduler/tracing'); expo-app:dev: [18:25:03] | ^ expo-app:dev: [18:25:03] 21 | expo-app:dev: [18:25:03] 22 | var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; expo-app:dev: [18:25:03] 23 | What platform(s) does this occur on? Not Applicable

Environment ./apps/expo/package.json

{
  "name": "expo-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "dev": "yarn env:development && npx expo r -c ",
    "prod": "yarn env:production && expo start --no-dev",
    "env:production": "cp .env.production .env",
    "env:development": "cp .env.development .env",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.json"
  },
  "dependencies": {
    "@andescalada/api": "*",
    "@andescalada/climbs-drawer": "*",
    "@andescalada/ui": "*",
    "@andescalada/utils": "*",
    "@datadog/mobile-react-native": "^1.0.0-rc7",
    "@datadog/mobile-react-navigation": "^1.0.0-rc8",
    "@expo/react-native-action-sheet": "^3.13.0",
    "@hookform/resolvers": "^2.9.8",
    "@openspacelabs/react-native-zoomable-view": "^2.0.4",
    "@prisma/client": "^3.8.1",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-picker/picker": "2.4.2",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/stack": "^6.2.3",
    "@reduxjs/toolkit": "^1.8.5",
    "@shopify/react-native-skia": "0.1.141",
    "@shopify/restyle": "^2.1.0",
    "buffer": "^6.0.3",
    "dotenv": "^16.0.2",
    "expo": "~46.0.9",
    "expo-auth-session": "~3.7.1",
    "expo-constants": "~13.2.4",
    "expo-crypto": "~11.0.0",
    "expo-font": "~10.2.0",
    "expo-image-picker": "~13.3.1",
    "expo-random": "~12.3.0",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.0",
    "expo-tracking-transparency": "~2.3.1",
    "jwt-decode": "^3.1.2",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-hook-form": "^7.35.0",
    "react-native": "0.69.5",
    "react-native-dotenv": "^3.3.1",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-svg": "12.3.0",
    "react-native-web": "~0.18.7",
    "react-redux": "^8.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0-0",
    "@types/jwt-decode": "^3.1.0",
    "@types/react-native": "~0.69.5",
    "expo-cli": "^6.0.5",
    "prisma": "^3.8.1",
    "typescript": "^4.6.3"
  },
  "peerDependencies": {
    "react": "*",
    "zod": "*"
  },
  "private": true
}

./package.json

{
  "name": "andescalada",
  "private": true,
  "version": "0.0.1",
  "author": "elevyg",
  "license": "MIT",
  "scripts": {
    "db-up": "pscale connect andescalada develop --port 3309",
    "dev:nextjs": "turbo run dev --filter=@andescalada/nextjs",
    "dev:expo": "turbo run dev --filter=expo-app",
    "build": "turbo run build",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "dev": "turbo run dev",
    "clean": "find . -name node_modules -o -name .next -o -name .expo -type d -prune | xargs rm -rf",
    "postinstall": "prisma generate",
    "lint-and-fix": "eslint . --ext .ts,.tsx,.js,.jsx,.json --fix",
    "prettier-format": "prettier --config .prettierrc '**/*.{json,js,jsx,ts,tsx,css,scss,md}' --write"
  },
  "workspaces": {
    "packages": [
      "packages/*",
      "apps/*"
    ]
  },
  "dependencies": {
    "@tanstack/react-query": "^4.3.9",
    "@trpc/client": "^10.0.0-proxy-beta.0",
    "@trpc/next": "^10.0.0-proxy-beta.0",
    "@trpc/react": "^10.0.0-proxy-beta.0",
    "@trpc/server": "^10.0.0-proxy-beta.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "zod": "^3.19.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4 || ^3 || ^2.3.0 || ^1.7.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "prettier": "^2.4.0",
    "prisma": "^3.8.1",
    "turbo": "^1.3.1",
    "typescript": "^4.6.3"
  },
  "resolutions": {
    "@types/react": "17.0.43"
  }
}

Minimal reproducible example My repo is private but it is reproducible with the create-t3-turbo template Clone this repo https://github.com/elevyg/create-t3-turbo

Steps to reproduce

yarn install cd apps/expo expo r -c

Screen Shot of the error

[juliusmarminge]

To me it looks like @shopify/react-native-skia requires react-reconciler which requires react@^18.2.0 and this project is (and currently has to be) on [email protected].