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

by

Summary

React Native Skia integration with RN 0.81+ and the New Architecture causes massive build times, huge disk usage, and poor runtime performance. Key issues include:

  • 10–15 minute initial build times
  • Project size bloating from 1–2 GB to 7–8 GB
  • Slow hot reload and rebuild cycles
  • Dependency on New Architecture for Skia rendering

Root Cause

The root cause is incompatible optimizations between React Native Skia and the New Architecture (Fabric/TurboModules). Skia’s native dependencies and build scripts conflict with the new build pipeline, leading to:

  • Redundant native code compilation
  • Inefficient resource bundling
  • Unoptimized Hermes integration

Why This Happens in Real Systems

  • New Architecture changes: Fabric and TurboModules introduce new build steps and dependencies.
  • Skia’s native complexity: Skia compiles large C++ codebases, which are not optimized for the new pipeline.
  • Hermes engine limitations: Hermes struggles with Skia’s large JavaScript bindings.
  • Lack of official compatibility updates: Skia and React Native versions are not fully aligned for New Architecture.

Real-World Impact

  • Developer productivity loss: Slow builds and hot reloads hinder iteration.
  • Resource exhaustion: Massive disk usage impacts CI/CD pipelines and local development.
  • Poor user experience: Runtime performance degradation affects app usability.

Example or Code

{
  "dependencies": {
    "@shopify/react-native-skia": "^2.4.14",
    "react-native": "0.81.2"
  }
}

Key Issue: Skia 2.4.14 is not optimized for RN 0.81+ with New Architecture.

How Senior Engineers Fix It

  1. Disable New Architecture: Set newArchEnabled=false in android/gradle.properties as a temporary workaround.
  2. Downgrade Skia: Use Skia 2.3.x or earlier, which is more stable with older RN versions.
  3. Optimize build scripts: Exclude unnecessary Skia modules using gradle.properties flags.
  4. Monitor official updates: Track React Native and Skia release notes for compatibility fixes.

Why Juniors Miss It

  • Lack of architecture knowledge: Juniors may not understand the implications of New Architecture on native dependencies.
  • Overlooking version compatibility: Assuming latest versions work together without checking release notes.
  • Ignoring build warnings: Treating long build times as normal instead of investigating root causes.

Leave a Comment