Mastering React Native Skia: Hardware-Accelerated 2D Graphics, Custom Shaders, and High-Performance Canvas Animations with Reanimated

Executive Summary (TL;DR): Building fluid, high-performance visual interfaces in mobile applications requires bypassing standard UI view hierarchies in favor of direct GPU rasterization. React Native Skia integrates Google’s production-grade 2D graphics engine into React Native via the JavaScript Interface (JSI), pairing low-level C++ rendering primitives with React Native Reanimated worklets on the native UI thread. This guide explores the internal C++ memory bindings, Android and iOS graphics pipelines, runtime SkSL shader compilation, and memory management strategies required to architect resilient, frame-accurate graphics systems.

1. Architecture: JSI HostObjects and Direct C++ Memory Binding

React Native Skia binds the C++ Google Skia Graphics Engine directly to the JavaScript runtime using the JavaScript Interface (JSI) rather than relying on asynchronous bridge serialization. Core graphics primitives such as SkPath, SkPaint, SkImage, and SkPicture are exposed as jsi::HostObject instances backed by native sk_sp<T> smart pointers. This architecture enables direct, synchronous method invocations between the JavaScript engine (Hermes or V8) and native C++ graphics contexts without JSON serialization or thread handoffs.

+-------------------------------------------------------------------------+
|                           JavaScript Runtime                            |
|             (Hermes / V8 Engine - Primary or Worklet Thread)            |
+-------------------------------------------------------------------------+
                                     |
                     Synchronous JSI Method Invocations
                   (No JSON / Asynchronous Bridge Batches)
                                     v
+-------------------------------------------------------------------------+
|                       JSI HostObject Layer (C++)                        |
|   +-----------------------------------------------------------------+   |
|   |  JsiSkPath        JsiSkPaint        JsiSkImage     JsiSkPicture |   |
|   |  (HostObject)     (HostObject)      (HostObject)   (HostObject) |   |
|   +-----------------------------------------------------------------+   |
|                                    |                                    |
|                       sk_sp<T> Reference Counting                       |
|                                    v                                    |
|   +-----------------------------------------------------------------+   |
|   |   SkPath            SkPaint           SkImage        SkPicture  |   |
|   |                       (Skia Core C++ Engine)                    |   |
|   +-----------------------------------------------------------------+   |
+-------------------------------------------------------------------------+
                                     |
                          Raster / GPU Pipelines
                                     v
+-------------------------------------------------------------------------+
|                    Hardware Graphics Backends (GPU)                     |
|           iOS: Metal (CAMetalLayer)  |  Android: Vulkan / OpenGL ES     |
+-------------------------------------------------------------------------+

The Mechanism of jsi::HostObject and sk_sp<T>

In the legacy React Native bridge architecture, UI mutations crossed thread boundaries as serialized JSON message payloads scheduled over asynchronous queues. As detailed in the React Native New Architecture Landing Page, JSI allows C++ objects to be exposed directly to JavaScript with synchronous lifecycle control.

When you create an SkPath in React Native Skia, the native C++ layer allocates an instance of SkPath managed by Skia's intrusive smart pointer sk_sp<SkPath>. It then constructs a wrapper derived from jsi::HostObject:

// Conceptual C++ HostObject Wrapper in React Native Skia
class JsiSkPath : public jsi::HostObject {
public:
  JsiSkPath(sk_sp<SkPath> path) : path_(std::move(path)) {}

  jsi::Value get(jsi::Runtime& runtime, const jsi::PropNameID& name) override {
    auto propName = name.utf8(runtime);
    
    if (propName == "lineTo") {
      return jsi::Function::createFromHostFunction(
        runtime,
        name,
        2,
        [this](jsi::Runtime& rt, const jsi::Value& thisVal, const jsi::Value* args, size_t count) -> jsi::Value {
          if (count >= 2) {
            float x = static_cast<float>(args[0].asNumber());
            float y = static_cast<float>(args[1].asNumber());
            this->path_->lineTo(x, y); // Direct synchronous C++ execution
          }
          return jsi::Value::undefined();
        }
      );
    }
    return jsi::Value::undefined();
  }

  sk_sp<SkPath> getObject() const { return path_; }

private:
  sk_sp<SkPath> path_;
};

Because JavaScript holds a reference to the jsi::HostObject, calling path.lineTo(x, y) triggers the C++ host function immediately on the executing thread. There is no message queue, no serialization, and no asynchronous latency.

Technical Trade-offs & Boundary Costs

While JSI eliminates bridge serialization, calling native methods through a jsi::HostObject is not completely without cost. Every property access and host function invocation requires:

1. Translating JavaScript primitives (jsi::Value) into native C++ types (float, SkScalar, std::string).
2. Performing native dynamic dispatch via C++ virtual method tables.
3. Managing local JSI reference scopes.

Repeatedly creating new HostObject wrappers inside a 60 FPS or 120 FPS render loop increases memory management and garbage collection pressure. High-performance implementations avoid allocating new paths or paints per frame, favoring in-place mutations of existing native instances.

2. Native Rendering Pipelines: Metal, Vulkan, and Android Compositing Trade-offs

React Native Skia bypasses platform-native UI widgets (like UIView or android.view.View) to execute draw calls directly against native hardware graphics contexts. On iOS, Skia compiles draw commands into Metal command buffers via CAMetalLayer and GrDirectContext. On Android, rendering is routed through OpenGL ES or Vulkan, interfacing with platform windows through either TextureView or SurfaceView.

===========================================================================
                iOS RENDER PIPELINE (Metal Backend)
===========================================================================
  Skia Canvas Commands (DrawRect, DrawPath, DrawVertices)
                           │
                           ▼
  Skia GrDirectContext (C++ GPU State Machine)
                           │
                           ▼
  Apple Metal API (CAMetalLayer -> MTLCommandBuffer -> MTLRenderCommandEncoder)
                           │
                           ▼
  Apple GPU Hardware (Tile-Based Deferred Rendering)

===========================================================================
             ANDROID RENDER PIPELINE (Surface View vs Texture View)
===========================================================================
                        Skia Canvas Commands
                                 │
                                 ▼
                     GrDirectContext (OpenGL ES / Vulkan)
                                 │
                 ┌───────────────┴───────────────┐
                 ▼                               ▼
     ┌───────────────────────┐       ┌───────────────────────┐
     │      SurfaceView      │       │      TextureView      │
     ├───────────────────────┤       ├───────────────────────┤
     │ Draws directly to     │       │ Renders into an       │
     │ dedicated compositor  │       │ offscreen EGL buffer  │
     │ layer (SurfaceFlinger)│       │ (OpenGLES texture)    │
     │                       │       │                       │
     │ • Less compositing    │       │ • Integrates with RN  │
     │   overhead            │       │   opacity, transforms,│
     │ • Strict z-ordering   │       │   and view clipping   │
     │   constraints         │       │ • Requires additional │
     │ • Punch-through hole  │       │   compositing copy    │
     └───────────────────────┘       └───────────────────────┘
                 │                               │
                 └───────────────┬───────────────┘
                                 ▼
                 Android SurfaceFlinger / Hardware Composer
                                 │
                                 ▼
                 Device GPU (Adreno / Mali / Immortalis)

iOS Metal Execution Path

On Apple devices, Skia initializes a GrDirectContext tied to an active MTLDevice and MTLCommandQueue. When the Skia root canvas receives drawing commands, Skia’s internal rasterizer determines whether to execute geometry paths via CPU-based scanline rasterization (into a shared memory bitmap) or directly on the GPU using stencil-and-cover or tessellation pipelines.

Once resolved, Skia records state changes into native Metal render encoders. The target render target is a texture supplied by CAMetalLayer.nextDrawable(), presenting finished framebuffers directly to the iOS display server (QuartzCore/CoreAnimation).

Android Display Layer Mechanics: TextureView vs. SurfaceView

On Android, integrating hardware-accelerated 2D graphics into a mixed React Native view tree requires balancing composition flexibility against memory and compositor throughput:

For complex data visualization dashboards embedded within scrollable native UI components, TextureView provides predictable layout hierarchy composition. For full-screen graphics, games, or high-density particle engines where compositing overhead must be minimized, SurfaceView provides direct access to the display compositor.

3. UI Thread Animations: Bridging Skia with Reanimated Worklets

Animations in React Native Skia achieve smooth, frame-accurate execution by integrating natively with React Native Reanimated. Reanimated evaluates animation loops inside a dedicated JavaScript runtime on the UI/native thread using worklets, updating Skia C++ render tree properties directly without triggering React JS fiber reconciliation or React state updates.

+-------------------------------------------------------------------------+
|                  MAIN THREAD (JavaScript / React Fiber)                 |
|   • Business logic, network requests, React state updates (useState)   |
|   • Creates SharedValues: const progress = useSharedValue(0);          |
|   • Declarative mount: <Canvas><Circle r={progress} /></Canvas>        |
+-------------------------------------------------------------------------+
                                     │
                 Worklet Initialization & SharedValue Binding
                                     ▼
+-------------------------------------------------------------------------+
|                       UI / NATIVE ANIMATION THREAD                      |
|                   (Dedicated Reanimated JS Runtime)                     |
|                                                                         |
|   useFrameCallback / useDerivedValue / withSpring / withTiming         |
|   • Evaluates frame delta, physics, interpolation directly in worklet   |
|   • Updates JSI Skia primitives via direct native HostObject calls      |
|   • Bypasses React JS reconciliation entirely                           |
+-------------------------------------------------------------------------+
                                     │
                     Direct C++ Render Tree Invalidation
                                     ▼
+-------------------------------------------------------------------------+
|                         SKIA C++ RENDER PIPELINE                        |
|   • Mutates SkPaint / SkPath geometric buffers in-place                 |
|   • Submits updated command buffers to GPU (Metal / OpenGL / Vulkan)    |
+-------------------------------------------------------------------------+

Declarative Bindings vs. Direct Draw Callbacks

React Native Skia components consume Reanimated SharedValue and DerivedValue objects directly. When an animated value changes on the UI thread, Skia's native view manager receives the updated value and marks the native surface dirty, triggering a GPU redraw on the next VSYNC interval.

There are two primary patterns for executing animations with Skia and Reanimated:

Pattern A: Declarative Property Binding

Passing SharedValue instances directly to Skia declarative elements:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Canvas, Circle, Group, Paint } from '@shopify/react-native-skia';
import { useSharedValue, withRepeat, withTiming, Easing } from 'react-native-reanimated';

export const DeclarativePulse = () => {
  const radius = useSharedValue(20);

  React.useEffect(() => {
    radius.value = withRepeat(
      withTiming(80, { duration: 1200, easing: Easing.inOut(Easing.ease) }),
      -1,
      true
    );
  }, [radius]);

  return (
    <View style={styles.container}>
      <Canvas style={styles.canvas}>
        <Group>
          <Circle cx={100} cy={100} r={radius} color="#3B82F6" />
        </Group>
      </Canvas>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  canvas: { width: 200, height: 200 },
});

Pattern B: Low-Level Frame Loop via useFrameCallback

When rendering dynamic particles or custom physics simulations, relying on declarative JSX updates can add unnecessary overhead. Using Reanimated's useFrameCallback paired with Skia's imperative drawing APIs allows you to update coordinates and mutate native paths directly on the UI thread:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Canvas, useCanvasRef, Skia } from '@shopify/react-native-skia';
import { useFrameCallback, useSharedValue } from 'react-native-reanimated';

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  radius: number;
}

const PARTICLE_COUNT = 150;

export const ImperativeParticleField = () => {
  const canvasRef = useCanvasRef();
  const tick = useSharedValue(0);

  // Allocate particle memory once outside the frame loop
  const particles = useSharedValue<Particle[]>(
    Array.from({ length: PARTICLE_COUNT }, () => ({
      x: Math.random() * 300,
      y: Math.random() * 300,
      vx: (Math.random() - 0.5) * 2.5,
      vy: (Math.random() - 0.5) * 2.5,
      radius: Math.random() * 3 + 1,
    }))
  );

  useFrameCallback((frameInfo) => {
    'worklet';
    const delta = (frameInfo.timeSincePreviousFrame ?? 16.6) / 1000;
    const currentParticles = particles.value;

    for (let i = 0; i < currentParticles.length; i++) {
      const p = currentParticles[i];
      p.x += p.vx * delta * 60;
      p.y += p.vy * delta * 60;

      // Screen boundary collision logic
      if (p.x < 0 || p.x > 300) p.vx *= -1;
      if (p.y < 0 || p.y > 300) p.vy *= -1;
    }

    tick.value = (tick.value + 1) % 1000000;
  });

  return (
    <View style={styles.container}>
      <Canvas style={styles.canvas} ref={canvasRef}>
        {/* Skia reads particles directly on the UI thread when tick changes */}
        {particles.value.map((p, index) => (
          <Circle key={index} cx={p.x} cy={p.y} r={p.radius} color="#10B981" />
        ))}
      </Canvas>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  canvas: { width: 300, height: 300, backgroundColor: '#1E293B' },
});

Avoiding Thread Hops and Reconciliation Jank

To maintain continuous 60/120 FPS frame timing, calculations must remain entirely within the UI thread worklet runtime. Invoking runOnJS inside animation frame loops forces thread hops from the UI thread back to the React JavaScript thread, triggering queue contention and frame drops.

Similarly, updating React state (useState) inside a gesture or frame callback forces the React reconciler to re-evaluate the component sub-tree, defeating the performance benefits of JSI-level bindings.

4. Custom GPU Shaders: Compiling SkSL and Passing Dynamic Uniforms

Custom fragment shaders written in the Skia Shading Language (SkSL) allow you to run per-pixel mathematical effects directly on the device GPU. SkSL programs compile into native GPU shader bytecode (SPIR-V for Vulkan, MSL for Metal, or GLSL for OpenGL ES) via SkRuntimeEffect.MakeForShader(sksl). Once compiled, animation parameters pass dynamically into GPU uniform buffers without recompiling shader source code.

+-------------------------------------------------------------------------+
|                        SkSL Source Code (String)                        |
|                                                                         |
|   uniform float2 u_resolution;                                          |
|   uniform float  u_time;                                                |
|   uniform float2 u_pointer;                                             |
|   vec4 main(vec2 xy) { ... return color; }                              |
+-------------------------------------------------------------------------+
                                     │
           SkRuntimeEffect.MakeForShader(sksl) [CPU-bound Compilation]
                     (Execute ONLY at Component Mount)
                                     ▼
+-------------------------------------------------------------------------+
|                   Compiled SkRuntimeEffect Pipeline                     |
|           (Cached GPU Fragment Shader Bytecode: MSL / SPIR-V)           |
+-------------------------------------------------------------------------+
                                     │
             Per-Frame Uniform Updates via useDerivedValue()
                    (No Shader Recompilation Overhead)
                                     ▼
+-------------------------------------------------------------------------+
|                    GPU Uniform Buffer (VRAM Memory)                     |
|   [ u_resolution: (300, 300) | u_time: 14.22 | u_pointer: (150, 75) ]   |
+-------------------------------------------------------------------------+
                                     │
                         GPU Execution per Fragment
                                     ▼
+-------------------------------------------------------------------------+
|                       Hardware Rasterized Pixels                        |
+-------------------------------------------------------------------------+

The SkSL Execution Pipeline

SkSL is structurally similar to GLSL ES 3.0, but standardized across all graphics backends supported by Skia. The entry point of an SkSL runtime shader must conform to the following signature:

$$\text{vec4 main(vec2 coords)}$$

The coords argument represents the current pixel coordinate in local canvas space, and the return value is a pre-multiplied RGBA color vector (vec4(r, g, b, a)).

Avoiding Compilation Jank: The Lifecycle Rule

                               TIMELINE HAZARD
Frame 0 (Mount)        Frame 1 (Render)       Frame 2 (Render)       Frame 3 (Render)
───────┬──────────────────────┬──────────────────────┬──────────────────────►
       │                      │                      │
       ▼                      ▼                      ▼
  SkSL Compile           SkSL Re-Compile        SkSL Re-Compile
 [4-15ms CPU Lock]      [4-15ms CPU Lock]      [4-15ms CPU Lock]
  (Dropped Frame)        (Dropped Frame)        (Dropped Frame)
  
                             CORRECT ARCHITECTURE
Frame 0 (Mount)        Frame 1 (Render)       Frame 2 (Render)       Frame 3 (Render)
───────┬──────────────────────┬──────────────────────┬──────────────────────►
       │                      │                      │
       ▼                      ▼                      ▼
  SkSL Compile           Update Uniforms        Update Uniforms
 [Execute ONCE]          [<0.1ms Buffer]        [<0.1ms Buffer]

Compiling an SkSL string via SkRuntimeEffect.MakeForShader is a synchronous, CPU-bound operation. During this call, the Skia engine parses the AST, analyzes variable types, optimizes intermediate representations, and translates the program into platform-specific shader source (e.g., Metal Shading Language or SPIR-V).

If SkRuntimeEffect.MakeForShader is executed dynamically inside a render function or frame loop, the CPU lock will cause dropped frames. You must compile shaders once during application initialization or component mounting, passing updated coordinates and timestamps via dynamic uniform buffers.

Practical Implementation: Interactive Wave Displacement Shader

The following production-ready component compiles an SkSL ripple shader once and dynamically updates its uniform buffers on the UI thread using Reanimated:

import React, { useMemo } from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import { Canvas, Fill, Shader, Skia } from '@shopify/react-native-skia';
import {
  useSharedValue,
  useDerivedValue,
  useFrameCallback,
} from 'react-native-reanimated';
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

// 1. Define SkSL shader source outside the component
const RIPPLE_SKSL = `
uniform float2 u_resolution;
uniform float  u_time;
uniform float2 u_pointer;

vec4 main(vec2 xy) {
  vec2 uv = xy / u_resolution;
  vec2 center = u_pointer / u_resolution;
  
  float dist = distance(uv, center);
  
  // Calculate sinusoidal wave displacement
  float wave = sin(dist * 40.0 - u_time * 4.0) * 0.03;
  float intensity = smoothstep(0.4, 0.0, dist);
  
  vec2 displacedUV = uv + (dist > 0.0 ? (uv - center) / dist * wave * intensity : vec2(0.0));
  
  // Synthesize background gradient with dynamic light reflection
  vec3 baseColor = mix(vec3(0.05, 0.1, 0.2), vec3(0.1, 0.3, 0.6), displacedUV.y);
  float highlight = clamp(wave * 20.0 * intensity, 0.0, 1.0);
  
  return vec4(baseColor + vec3(highlight * 0.4), 1.0);
}
`;

export const SkSLRippleShader = () => {
  const time = useSharedValue(0);
  const pointerX = useSharedValue(SCREEN_WIDTH / 2);
  const pointerY = useSharedValue(SCREEN_HEIGHT / 2);

  // 2. Compile SkSL runtime effect once via useMemo
  const runtimeEffect = useMemo(() => {
    const effect = Skia.RuntimeEffect.MakeForShader(RIPPLE_SKSL);
    if (!effect) {
      throw new Error('Failed to compile SkSL runtime shader');
    }
    return effect;
  }, []);

  // 3. Increment uniform time on the UI thread frame callback
  useFrameCallback((frameInfo) => {
    'worklet';
    const delta = (frameInfo.timeSincePreviousFrame ?? 16.6) / 1000;
    time.value += delta;
  });

  // 4. Update pointer uniforms directly from touch gestures
  const panGesture = Gesture.Pan()
    .onChange((event) => {
      'worklet';
      pointerX.value = event.x;
      pointerY.value = event.y;
    });

  // 5. Construct reactive uniform dictionary on the UI thread
  const uniforms = useDerivedValue(() => {
    return {
      u_resolution: [SCREEN_WIDTH, SCREEN_HEIGHT],
      u_time: time.value,
      u_pointer: [pointerX.value, pointerY.value],
    };
  }, [time, pointerX, pointerY]);

  return (
    <GestureHandlerRootView style={styles.container}>
      <GestureDetector gesture={panGesture}>
        <View style={styles.canvasContainer}>
          <Canvas style={styles.canvas}>
            <Fill>
              <Shader source={runtimeEffect} uniforms={uniforms} />
            </Fill>
          </Canvas>
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  canvasContainer: { flex: 1 },
  canvas: { width: SCREEN_WIDTH, height: SCREEN_HEIGHT },
});

5. High-Throughput Canvas Optimization: Display Lists and Atlas Batching

When rendering complex scenes containing thousands of individual vectors or repeating graphical textures, dispatching individual drawing calls causes driver overhead on both the CPU and GPU. Skia solves this bottleneck through display list recording via SkPicture and sprite batching via the Atlas API (drawAtlas / SkRSXform).

+-------------------------------------------------------------------------+
|                  NAIVE RENDERING: INDIVIDUAL DRAW CALLS                 |
|                                                                         |
|   JS / Worklet Loop:                                                    |
|     drawRect(sprite1) ──► Native Transition ──► GPU Draw Call           |
|     drawRect(sprite2) ──► Native Transition ──► GPU Draw Call           |
|     ...                                                                 |
|     drawRect(spriteN) ──► Native Transition ──► GPU Draw Call           |
|                                                                         |
|   Result: High CPU-GPU pipeline stall & State Transition Overhead        |
+-------------------------------------------------------------------------+
                                    vs.
+-------------------------------------------------------------------------+
|              OPTIMIZED: ATLAS BATCHING (Skia Atlas / SkRSXform)         |
|                                                                         |
|   +--------------------------+    Transforms Array:                     |
|   | ┌──────┐ ┌──────┐ ┌────┐ |    [ SkRSXform(sc, ss, tx, ty), ... ]   |
|   | │Tex 1 │ │Tex 2 │ │... │ |                                          |
|   | └──────┘ └──────┘ └────┘ |    Source Rectangles:                    |
|   | Texture Atlas (SkImage)  |    [ SkRect(x, y, w, h), ... ]           |
|   +--------------------------+                                          |
|                │                                                        |
|                └───────────────┐                                        |
|                                ▼                                        |
|                     Single GPU Batch Draw Call                          |
|                       (glDrawElements / Metal)                          |
+-------------------------------------------------------------------------+

Display List Caching with SkPicture and PictureRecorder

An SkPicture is an immutable, serialized record of drawing commands. When complex static background layers (such as architectural maps, geometric grids, or SVG charts) do not change between frames, re-evaluating the underlying paths and paint objects wastes CPU cycles.

By recording operations into a PictureRecorder, Skia preserves the draw instructions in an internal display list:

import React, { useMemo } from 'react';
import { Canvas, Picture, Skia } from '@shopify/react-native-skia';

export const CachedVectorScene = () => {
  // Pre-record static vector geometry once
  const picture = useMemo(() => {
    const recorder = Skia.PictureRecorder();
    const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, 400, 400));
    
    const paint = Skia.Paint();
    paint.setColor(Skia.Color('#64748B'));
    paint.setStrokeWidth(1);
    paint.setStyle(1); // Stroke

    // Record a 50x50 complex coordinate grid
    for (let x = 0; x <= 400; x += 8) {
      canvas.drawLine(x, 0, x, 400, paint);
    }
    for (let y = 0; y <= 400; y += 8) {
      canvas.drawLine(0, y, 400, y, paint);
    }

    return recorder.finishRecordingAsPicture();
  }, []);

  return (
    <Canvas style={{ width: 400, height: 400 }}>
      {/* Replay display list directly on the GPU without recalculating path lines */}
      <Picture picture={picture} />
    </Canvas>
  );
};

High-Density Sprite Batching with the Atlas API

For particle systems, game components, or telemetry indicators where hundreds of distinct elements share common texture assets, invoking individual drawImage commands triggers excessive GPU state changes.

Skia’s Atlas component uses SkRSXform (a compressed representation of rotation, uniform scale, and $(x,y)$ translation) to draw hundreds of sub-rectangles from a single texture atlas in a single GPU draw call:

import React, { useMemo } from 'react';
import { Canvas, Atlas, Skia, rect, useImage } from '@shopify/react-native-skia';
import { useSharedValue, useDerivedValue, useFrameCallback } from 'react-native-reanimated';

const SPRITE_COUNT = 500;

export const BatchedSpriteSystem = () => {
  // Load texture atlas containing all sub-sprites
  const image = useImage(require('../assets/spritesheet.png'));
  const clock = useSharedValue(0);

  useFrameCallback((frameInfo) => {
    'worklet';
    clock.value = (frameInfo.timestamp / 1000);
  });

  // Source rectangles defining sub-textures within the atlas
  const sprites = useMemo(() => {
    return Array.from({ length: SPRITE_COUNT }, () => rect(0, 0, 32, 32));
  }, []);

  // Compute dynamic transforms on the UI thread
  const transforms = useDerivedValue(() => {
    const t = clock.value;
    return Array.from({ length: SPRITE_COUNT }, (_, i) => {
      const angle = t + (i * (Math.PI * 2 / SPRITE_COUNT));
      const radius = 100 + Math.sin(t * 2 + i) * 30;
      const x = 150 + Math.cos(angle) * radius;
      const y = 150 + Math.sin(angle) * radius;
      
      const sc = Math.cos(angle) * 0.8;
      const ss = Math.sin(angle) * 0.8;
      
      // SkRSXform: [sc, ss, tx, ty]
      return Skia.RSXform(sc, ss, x, y);
    });
  }, [clock]);

  if (!image) return null;

  return (
    <Canvas style={{ width: 300, height: 300 }}>
      {/* Batched draw call: renders all 500 sprites in a single pipeline execution */}
      <Atlas image={image} sprites={sprites} transforms={transforms} />
    </Canvas>
  );
};

6. Memory Management in Dual Runtimes: GC Finalizers, sk_sp<T>, and Native VRAM Pressure

React Native Skia operates across two distinct memory domains: the JavaScript engine managed by a tracing Garbage Collector (Hermes or V8) and the native C++/GPU runtime managed by reference counting (sk_sp<T>) and manual allocations. Understanding the disconnect between these memory models is critical to preventing out-of-memory crashes on resource-constrained mobile hardware.

+-------------------------------------------------------------------------+
|                  JAVASCRIPT ENGINE MEMORY (Hermes / V8)                 |
|                                                                         |
|   HostObject Reference (Tiny JS Heap Footprint: ~48 Bytes)              |
|   • The JS Garbage Collector sees only the wrapper object size.         |
|   • The JS GC is UNAWARE of underlying multi-megabyte native buffers.   |
+-------------------------------------------------------------------------+
                                     │
                        Bridge Lifecycle Connection
                                     ▼
+-------------------------------------------------------------------------+
|                   NATIVE C++ / GPU MEMORY (Skia Engine)                 |
|                                                                         |
|   sk_sp<SkImage> / GrDirectContext Allocation (Large Native Footprint)  |
|   • 4K Bitmap Texture: ~33.1 MB GPU VRAM                                |
|   • Complex Path Topology: Multiple Kilobytes C++ Native Heap           |
|                                                                         |
|   GC Latency Hazard:                                                    |
|   If JS GC doesn't run, native C++ finalizers are NOT executed,         |
|   leading to VRAM exhaustion before a GC cycle is triggered.           |
+-------------------------------------------------------------------------+