React Native Skia on RN 0.81+ with New Architecture causes massive build time, huge build size, and poor performance

1 week ago 11
ARTICLE AD BOX

I’m facing serious installation time, build-time, disk-usage, and runtime performance issues when using @/shopify/react-native-skia with the React Native New Architecture enabled on RN 0.81+.

Current Behavior

First Android build after installing Skia takes 10–15 minutes Project directory size increases from ~1–2 GB to ~7–8 GB (with a few basic Libs) Development runtime performance feels noticeably slow Hot reload / rebuild cycles become very slow If newArchEnabled=false, the Skia Canvas does not render (blank screen or runtime error)

Environment:

React Native: 0.81.2 Skia: 2.4.14 Hermes enabled Architectures: armeabi-v7a,arm64-v8a,x86,x86_64 OS: Windows 10 64 bit

Is there:

Any supported Skia version that works reliably on RN 0.81.2+ without New Architecture? A recommended Skia + React Native version combination with reasonable build performance? Any official guidance on whether Skia now depends on Fabric/TurboModules on newer RN versions?

Installation Time Issue

Installing Skia itself takes unusually long on a fresh project:

PS D:\Work\FreeProjects\ArchTest> npm i @/shopify/react-native-skia added 5 packages, and audited 853 packages in 8m 164 packages are looking for funding run `npm fund` for details found 0 vulnerabilities PS D:\Work\FreeProjects\ArchTest>

Below is my package.json after creating a brand-new React Native CLI project and installing only /shopify/react-native-skia:

{   "name": "ArchTest",   "version": "0.0.1",   "private": true,   "scripts": {     "android": "react-native run-android",     "ios": "react-native run-ios",     "lint": "eslint .",     "start": "react-native start",     "test": "jest"   },   "dependencies": {     "@react-native/new-app-screen": "0.81.2",     "@shopify/react-native-skia": "^2.4.14",     "react": "19.1.0",     "react-native": "0.81.2",     "react-native-safe-area-context": "^5.5.2"   },   "devDependencies": {     "@babel/core": "^7.25.2",     "@babel/preset-env": "^7.25.3",     "@babel/runtime": "^7.25.0",     "@react-native-community/cli": "20.0.0",     "@react-native-community/cli-platform-android": "20.0.0",     "@react-native-community/cli-platform-ios": "20.0.0",     "@react-native/babel-preset": "0.81.2",     "@react-native/eslint-config": "0.81.2",     "@react-native/metro-config": "0.81.2",     "@react-native/typescript-config": "0.81.2",     "@types/jest": "^29.5.13",     "@types/react": "^19.1.0",     "@types/react-test-renderer": "^19.1.0",     "eslint": "^8.19.0",     "jest": "^29.6.3",     "prettier": "2.8.8",     "react-test-renderer": "19.1.0",     "typescript": "^5.8.3"   },   "engines": {     "node": ">=20"   } }
Read Entire Article