⬡ Dev Tools/2026-04-04Advanced

React Native Skia in Rork — Custom Charts, Animations, and Shader Effects

A complete guide to implementing high-quality custom graphics in your Rork app using React Native Skia. Covers Canvas-based custom charts, gradients, shader effects, and interactive animations with Reanimated — all with practical, production-ready code.

React Native SkiaRork⁵⁸⁵Custom GraphicsAnimation⁸CanvasShadersReanimated¹⁰Premium UI

✦ Premium Article

Where Visual Quality Becomes an Indie Advantage

Scroll a category page on the App Store and the apps that stop your thumb share one trait: they simply look better than what sits around them.

Standard React Native components tend to produce UIs that look, frankly, pretty similar to each other. Native engineers writing Swift or Kotlin can craft visuals that feel like a completely different tier of quality. Until recently, bridging that gap from a JavaScript-first environment was painful.

React Native Skia changes that. Powered by Google's battle-tested 2D graphics engine used in Chrome and Flutter, it lets you drive the same GPU-level rendering pipeline directly from your Rork app via a Canvas API. That means:

Fully custom charts (line, bar, donut) designed pixel-for-pixel to match your brand
Gradients, blur, shadow, and glow effects that feel silky and native
GLSL-style shader programs via Skia Shader Language (SL) for visual effects impossible in standard RN
Butter-smooth interactive animations when paired with React Native Reanimated

This guide walks you from installation all the way through production-grade implementation patterns and performance tuning, with copy-paste-ready TypeScript throughout.

Prerequisites and Setup

Who This Article Is For

This is an advanced guide. You should be comfortable with:

React Native components and styling fundamentals
TypeScript generics and interface definitions
Building and running apps with Rork Max (Expo-based)

Installing the Required Packages

# Install Skia via Expo CLI to get the correct compatible version
npx expo install @shopify/react-native-skia
 
# Install Reanimated for interactive animations (highly recommended)
npx expo install react-native-reanimated

Always use npx expo install rather than plain npm install. Expo's package resolver picks the version that matches your current SDK, avoiding hard-to-debug version mismatches.

Configuring metro.config.js

When using Reanimated alongside Skia, add the Babel plugin:

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
 
const config = getDefaultConfig(__dirname);
 
config.transformer.babelTransformerPath = require.resolve(
  'react-native-reanimated/plugin'
);
 
module.exports = config;

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin', // Must be last
    ],
  };
};

✦

Thank you for reading this far.

Continue Reading

What follows includes implementation code, benchmarks, and practical content we hope you'll find useful. This site runs without ads — server and development costs are supported entirely by members like you. If it's been helpful, we'd be truly grateful for your support.

WHAT YOU'LL LEARN

✦Build custom charts, gradient effects, and shader animations step by step — from Skia basics to full app integration

✦Combine Skia with Reanimated to create fluid interactive animations that make your app stand out from the competition

✦Learn performance best practices and avoid the common pitfalls that cause FPS drops in graphics-heavy React Native apps

Secure payment via Stripe · Cancel anytime

✦

Unlock This Article

Get full access to the rest of this article. Buy once, read anytime. This site is ad-free — your support goes directly toward keeping it running.

Unlock all articles with Membership →

Core Concepts: The Canvas Drawing Model

Before jumping into patterns, it's worth internalizing Skia's mental model: you draw by stacking drawing instructions onto a Canvas — similar to HTML Canvas or SVG, but executed entirely on the GPU thread.

Basic Canvas Drawing

import { Canvas, Circle, Paint, Rect } from '@shopify/react-native-skia';
 
export default function BasicSkiaDemo() {
  return (
    // Canvas defines the drawable area
    <Canvas style={{ width: 300, height: 300 }}>
      {/* Background fill */}
      <Rect x={0} y={0} width={300} height={300} color="#1a1a2e" />
 
      {/* Filled circle */}
      <Circle cx={150} cy={150} r={80} color="#e94560" />
 
      {/* Stroke-only circle using Paint */}
      <Circle cx={150} cy={150} r={80}>
        <Paint color="white" style="stroke" strokeWidth={3} />
      </Circle>
    </Canvas>
  );
}

Expected output: A deep-navy background with a red circle outlined in white.

The Paint Component

Paint defines how a shape is drawn — color, stroke width, blend mode, filters, etc.

import { Canvas, Rect, Paint, BlurMask } from '@shopify/react-native-skia';
 
export default function PaintDemo() {
  return (
    <Canvas style={{ width: 300, height: 200 }}>
      <Rect x={20} y={20} width={120} height={80}>
        <Paint color="rgba(99, 179, 237, 0.8)">
          {/* Soft glow effect */}
          <BlurMask blur={12} style="normal" />
        </Paint>
      </Rect>
    </Canvas>
  );
}

Pattern 1: Custom Line Charts

No third-party charting library required. Here's how to build a beautiful gradient line chart from scratch.

Generating a Path from Data Points

import React, { useMemo } from 'react';
import { View, Text } from 'react-native';
import {
  Canvas,
  Path,
  Skia,
  LinearGradient,
  vec,
} from '@shopify/react-native-skia';
 
interface LineChartProps {
  data: number[];
  width: number;
  height: number;
  color?: string;
}
 
export function CustomLineChart({
  data,
  width,
  height,
  color = '#6366f1',
}: LineChartProps) {
  const padding = 20;
  const chartWidth = width - padding * 2;
  const chartHeight = height - padding * 2;
 
  const { linePath, fillPath } = useMemo(() => {
    const maxValue = Math.max(...data);
    const minValue = Math.min(...data);
    const range = maxValue - minValue || 1;
 
    const line = Skia.Path.Make();
    const fill = Skia.Path.Make();
 
    data.forEach((value, index) => {
      const x = padding + (index / (data.length - 1)) * chartWidth;
      const y =
        padding + chartHeight - ((value - minValue) / range) * chartHeight;
 
      if (index === 0) {
        line.moveTo(x, y);
        fill.moveTo(x, y);
      } else {
        line.lineTo(x, y);
        fill.lineTo(x, y);
      }
    });
 
    // Close the fill path along the bottom edge
    fill.lineTo(padding + chartWidth, padding + chartHeight);
    fill.lineTo(padding, padding + chartHeight);
    fill.close();
 
    return { linePath: line, fillPath: fill };
  }, [data, chartWidth, chartHeight, padding]);
 
  return (
    <Canvas style={{ width, height }}>
      {/* Gradient fill under the line */}
      <Path path={fillPath} style="fill">
        <LinearGradient
          start={vec(0, padding)}
          end={vec(0, padding + chartHeight)}
          colors={[`${color}40`, `${color}00`]}
        />
      </Path>
 
      {/* The line itself */}
      <Path
        path={linePath}
        style="stroke"
        strokeWidth={2.5}
        color={color}
        strokeCap="round"
        strokeJoin="round"
      />
    </Canvas>
  );
}
 
export default function ChartScreen() {
  const salesData = [12, 28, 19, 45, 38, 52, 61, 48, 70, 83, 72, 95];
 
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: '600', marginBottom: 12 }}>
        Monthly Revenue
      </Text>
      <CustomLineChart data={salesData} width={340} height={200} color="#6366f1" />
    </View>
  );
}

Expected output: A purple line chart with a gradient fade-out beneath it — the kind of chart you see in polished fintech or health apps.

If you'd prefer a faster path to standard charts without the custom implementation overhead, check out Building Interactive Charts and Graphs in Rork Apps — A Practical Victory Native Guide. Skia is the right choice when design differentiation matters; Victory Native is the right choice when you just need data on screen quickly.

Donut Chart

import React from 'react';
import { Canvas, Path, Skia } from '@shopify/react-native-skia';
 
interface DonutChartProps {
  data: { value: number; color: string }[];
  size: number;
  strokeWidth?: number;
}
 
export function DonutChart({ data, size, strokeWidth = 24 }: DonutChartProps) {
  const total = data.reduce((sum, d) => sum + d.value, 0);
  const cx = size / 2;
  const cy = size / 2;
  const radius = (size - strokeWidth) / 2;
 
  let startAngle = -Math.PI / 2; // Start at 12 o'clock
 
  const segments = data.map((segment) => {
    const angle = (segment.value / total) * Math.PI * 2;
    const endAngle = startAngle + angle;
 
    const path = Skia.Path.Make();
    const rect = {
      x: cx - radius,
      y: cy - radius,
      width: radius * 2,
      height: radius * 2,
    };
 
    const startDeg = (startAngle * 180) / Math.PI;
    const sweepDeg = (angle * 180) / Math.PI;
    path.addArc(rect, startDeg, sweepDeg);
 
    startAngle = endAngle;
    return { path, color: segment.color };
  });
 
  return (
    <Canvas style={{ width: size, height: size }}>
      {segments.map((seg, i) => (
        <Path
          key={i}
          path={seg.path}
          color={seg.color}
          style="stroke"
          strokeWidth={strokeWidth}
          strokeCap="butt"
        />
      ))}
    </Canvas>
  );
}

Pattern 2: Gradients and Visual Effects

Multi-layer Gradient Background

import {
  Canvas,
  Rect,
  LinearGradient,
  vec,
  Group,
  BlurMask,
  Circle,
} from '@shopify/react-native-skia';
 
export function GradientCard({ width, height }: { width: number; height: number }) {
  return (
    <Canvas style={{ width, height }}>
      {/* Base gradient */}
      <Rect x={0} y={0} width={width} height={height}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(width, height)}
          colors={['#667eea', '#764ba2']}
        />
      </Rect>
 
      {/* Glowing accent circles */}
      <Group>
        <Circle cx={width * 0.2} cy={height * 0.3} r={60} color="#ffffff20">
          <BlurMask blur={30} style="normal" />
        </Circle>
      </Group>
      <Group>
        <Circle cx={width * 0.8} cy={height * 0.7} r={80} color="#ffffff15">
          <BlurMask blur={40} style="normal" />
        </Circle>
      </Group>
    </Canvas>
  );
}

Glassmorphism Card

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {
  Canvas,
  RoundedRect,
  LinearGradient,
  vec,
  Paint,
} from '@shopify/react-native-skia';
 
export function GlassMorphismCard() {
  const cardWidth = 320;
  const cardHeight = 180;
 
  return (
    <View style={styles.container}>
      <Canvas style={[styles.canvas, { width: cardWidth, height: cardHeight }]}>
        {/* Frosted glass base */}
        <RoundedRect
          x={0}
          y={0}
          width={cardWidth}
          height={cardHeight}
          r={20}
          color="rgba(255,255,255,0.15)"
        />
        {/* Highlight along the top */}
        <RoundedRect x={1} y={1} width={cardWidth - 2} height={cardHeight / 2} r={20}>
          <LinearGradient
            start={vec(0, 0)}
            end={vec(0, cardHeight / 2)}
            colors={['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.0)']}
          />
        </RoundedRect>
        {/* Thin border */}
        <RoundedRect x={0} y={0} width={cardWidth} height={cardHeight} r={20}>
          <Paint color="rgba(255,255,255,0.2)" style="stroke" strokeWidth={1} />
        </RoundedRect>
      </Canvas>
      <View style={[styles.content, { width: cardWidth }]}>
        <Text style={styles.title}>Premium Card</Text>
        <Text style={styles.subtitle}>Glassmorphism UI with Skia</Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { position: 'relative' },
  canvas: { position: 'absolute' },
  content: { position: 'absolute', padding: 24 },
  title: { color: 'white', fontSize: 22, fontWeight: '700' },
  subtitle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, marginTop: 4 },
});

Pattern 3: Interactive Animations with Reanimated

Combining Skia with Reanimated unlocks the full spectrum of interactive animation. If you're new to Reanimated, Rork × React Native Reanimated & Gesture Handler — Building 60fps Animations and Advanced Gesture Interactions is the recommended primer before diving into this section. Skia renders on the GPU thread; Reanimated drives values on the UI thread. Together, they let you build 60–120fps animations without touching the JavaScript thread at all.

Bridging useSharedValue to Skia

import React from 'react';
import { Canvas, Circle, Paint, useValue, runTiming, Easing } from '@shopify/react-native-skia';
import { TouchableOpacity } from 'react-native';
 
export function SkiaPulseAnimation() {
  const radius = useValue(40);
  const opacity = useValue(1);
 
  const startPulse = () => {
    runTiming(radius, 80, {
      duration: 1000,
      easing: Easing.out(Easing.cubic),
    });
    runTiming(opacity, 0, {
      duration: 1000,
      easing: Easing.out(Easing.cubic),
    });
  };
 
  return (
    <TouchableOpacity onPress={startPulse}>
      <Canvas style={{ width: 200, height: 200 }}>
        <Circle cx={100} cy={100} r={radius}>
          <Paint color={`rgba(99, 102, 241, ${opacity})`} />
        </Circle>
        <Circle cx={100} cy={100} r={40} color="#6366f1" />
      </Canvas>
    </TouchableOpacity>
  );
}

Animated Progress Ring

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {
  Canvas,
  Path,
  Skia,
  useSharedValueEffect,
  useValue,
} from '@shopify/react-native-skia';
import {
  useSharedValue,
  withTiming,
  Easing as ReanimatedEasing,
} from 'react-native-reanimated';
 
interface AnimatedRingProps {
  progress: number; // 0 to 1
  size: number;
  strokeWidth?: number;
  color?: string;
}
 
export function AnimatedProgressRing({
  progress,
  size,
  strokeWidth = 12,
  color = '#6366f1',
}: AnimatedRingProps) {
  const cx = size / 2;
  const cy = size / 2;
  const r = (size - strokeWidth) / 2;
 
  const animatedProgress = useSharedValue(0);
  const skiaProgress = useValue(0);
 
  // Bridge: Reanimated → Skia
  useSharedValueEffect(() => {
    skiaProgress.current = animatedProgress.value;
  }, animatedProgress);
 
  React.useEffect(() => {
    animatedProgress.value = withTiming(progress, {
      duration: 1200,
      easing: ReanimatedEasing.out(ReanimatedEasing.cubic),
    });
  }, [progress]);
 
  const path = Skia.Path.Make();
  path.addCircle(cx, cy, r);
 
  return (
    <View style={{ width: size, height: size }}>
      <Canvas style={{ width: size, height: size }}>
        {/* Background track */}
        <Path
          path={path}
          style="stroke"
          strokeWidth={strokeWidth}
          color={`${color}20`}
          strokeCap="round"
        />
        {/* Animated progress arc */}
        <Path
          path={path}
          style="stroke"
          strokeWidth={strokeWidth}
          color={color}
          strokeCap="round"
          start={0}
          end={skiaProgress}
        />
      </Canvas>
      <View style={[StyleSheet.absoluteFill, styles.center]}>
        <Text style={[styles.progressText, { color }]}>
          {Math.round(progress * 100)}%
        </Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  center: { alignItems: 'center', justifyContent: 'center' },
  progressText: { fontSize: 18, fontWeight: '700' },
});

Expected output: A smooth 1.2-second animation that fills the ring from 0% to whatever progress value you pass in.

Pattern 4: Shader Effects with Skia Shader Language (SL)

Skia Shader Language is a GLSL-like language that runs pixel-by-pixel on the GPU. It's the key to effects that are completely impossible with standard React Native: animated noise, fluid simulations, procedural textures, and more.

Wave Shader

import React, { useEffect } from 'react';
import {
  Canvas,
  Shader,
  Skia,
  Fill,
  useValue,
  runTiming,
  Easing,
} from '@shopify/react-native-skia';
 
const waveShaderSource = Skia.RuntimeEffect.Make(`
  uniform float time;
  uniform float2 resolution;
 
  half4 main(float2 pos) {
    float2 uv = pos / resolution;
 
    float wave1 = sin(uv.x * 10.0 + time * 2.0) * 0.05;
    float wave2 = sin(uv.x * 7.0 - time * 1.5) * 0.04;
 
    float y = uv.y + wave1 + wave2;
 
    half3 color1 = half3(0.4, 0.4, 0.9);
    half3 color2 = half3(0.1, 0.8, 0.6);
 
    float blend = smoothstep(0.4, 0.6, y);
    half3 color = mix(color1, color2, blend);
    float alpha = smoothstep(0.45, 0.55, y);
 
    return half4(color * alpha, alpha);
  }
`);
 
export function WaveAnimation({ width, height }: { width: number; height: number }) {
  const time = useValue(0);
 
  useEffect(() => {
    const loop = () => {
      runTiming(time, time.current + Math.PI * 2, {
        duration: 4000,
        easing: Easing.linear,
      });
    };
    loop();
    const interval = setInterval(loop, 4000);
    return () => clearInterval(interval);
  }, []);
 
  if (!waveShaderSource) return null;
 
  return (
    <Canvas style={{ width, height }}>
      <Fill>
        <Shader
          source={waveShaderSource}
          uniforms={{ time, resolution: [width, height] }}
        />
      </Fill>
    </Canvas>
  );
}

Fractal Brownian Motion Noise Shader

const noiseShaderSource = Skia.RuntimeEffect.Make(`
  uniform float time;
  uniform float2 resolution;
 
  float hash(float2 p) {
    p = fract(p * float2(234.34, 435.345));
    p += dot(p, p + 34.23);
    return fract(p.x * p.y);
  }
 
  float noise(float2 p) {
    float2 i = floor(p);
    float2 f = fract(p);
    float2 u = f * f * (3.0 - 2.0 * f);
    return mix(
      mix(hash(i), hash(i + float2(1, 0)), u.x),
      mix(hash(i + float2(0, 1)), hash(i + float2(1, 1)), u.x),
      u.y
    );
  }
 
  half4 main(float2 pos) {
    float2 uv = pos / resolution;
 
    float n = 0.0;
    float amplitude = 0.5;
    float frequency = 3.0;
    for (int i = 0; i < 5; i++) {
      n += amplitude * noise(uv * frequency + time * 0.2);
      amplitude *= 0.5;
      frequency *= 2.0;
    }
 
    half3 color = mix(
      half3(0.05, 0.05, 0.15),
      half3(0.3, 0.1, 0.5),
      n
    );
    color = mix(color, half3(0.6, 0.3, 0.9), pow(n, 2.0) * 0.5);
 
    return half4(color, 1.0);
  }
`);

Performance Best Practices

Skia is fast — but easy to misuse. These are the rules that matter most. For a broader look at performance optimization across your entire Rork app — rendering, memory, bundle size — see The Complete Rork App Performance Optimization Guide.

1. Memoize Your Paths

Regenerating paths on every render is the single most common performance mistake.

// ❌ Bad: path rebuilt every render
function BadExample({ data }: { data: number[] }) {
  const path = Skia.Path.Make(); // Runs on every render
  // ...
}
 
// ✅ Good: memoized, rebuilt only when data changes
function GoodExample({ data }: { data: number[] }) {
  const path = useMemo(() => {
    const p = Skia.Path.Make();
    // ...
    return p;
  }, [data]);
  // ...
}

2. Keep Canvas Size Minimal

GPU cost scales with Canvas area. Only wrap the region that actually needs custom graphics.

// ❌ Bad: entire screen in one Canvas
<Canvas style={{ flex: 1 }}>...</Canvas>
 
// ✅ Good: targeted Canvas
<View style={{ flex: 1 }}>
  <Text>Normal text — no GPU cost</Text>
  <Canvas style={{ width: 300, height: 200 }}>
    {/* Only the chart */}
  </Canvas>
</View>

3. Keep Animations on the GPU Thread

When animating, use Skia's useValue + runTiming (or the Reanimated bridge) so drawing stays on the GPU thread. Avoid driving Skia sizes/positions from useState or useAnimatedStyle applied to React Native Views — that routes through the JS bridge and risks frame drops.

4. Be Cautious with BlurMask and ImageFilter

Blur and image filters are expensive. Use them on static elements (backgrounds, decorative cards). Applying them to fast-moving animated elements almost always causes visible frame drops on mid-range Android devices.

Pattern 5: Advanced Composition — Clipping, Blending, and Masking

The patterns above cover the most common use cases, but Skia's compositing model goes much deeper. Here are three techniques that frequently appear in production-grade apps.

Circular Image Clip

Clipping is one of the first things developers reach for when building user avatar components. React Native's borderRadius has limitations with certain image formats and animation contexts; Skia's ClipPath is more reliable and composable.

import {
  Canvas,
  Image,
  Circle,
  useImage,
  ClipPath,
  Group,
} from '@shopify/react-native-skia';
 
interface AvatarProps {
  imageUri: string;
  size: number;
}
 
export function SkiaAvatar({ imageUri, size }: AvatarProps) {
  const image = useImage(imageUri);
  const r = size / 2;
 
  if (!image) return null;
 
  return (
    <Canvas style={{ width: size, height: size }}>
      <Group clip={<Circle cx={r} cy={r} r={r} />}>
        <Image
          image={image}
          x={0}
          y={0}
          width={size}
          height={size}
          fit="cover"
        />
      </Group>
      {/* Subtle border ring */}
      <Circle cx={r} cy={r} r={r - 1} color="rgba(255,255,255,0.3)" style="stroke" strokeWidth={2} />
    </Canvas>
  );
}

Blend Modes for Creative Effects

Skia exposes the full set of Porter-Duff compositing operators and additional blend modes. This opens up creative possibilities that would require complex workarounds in standard React Native.

import {
  Canvas,
  Rect,
  Circle,
  BlendMode,
  Group,
  Paint,
  LinearGradient,
  vec,
} from '@shopify/react-native-skia';
 
// "Multiply" blend mode darkens where two layers overlap
// "Screen" lightens — useful for glow effects over dark backgrounds
// "Overlay" enhances contrast in mixed areas
 
export function BlendModeDemo({ width, height }: { width: number; height: number }) {
  return (
    <Canvas style={{ width, height }}>
      {/* Base layer: gradient background */}
      <Rect x={0} y={0} width={width} height={height}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(width, height)}
          colors={['#1a1a2e', '#16213e']}
        />
      </Rect>
 
      {/* Overlay layer with Screen blend mode — creates a glow */}
      <Group>
        <Paint blendMode={BlendMode.Screen}>
          <Circle cx={width * 0.4} cy={height * 0.5} r={100} color="#6366f180" />
        </Paint>
      </Group>
 
      <Group>
        <Paint blendMode={BlendMode.Screen}>
          <Circle cx={width * 0.6} cy={height * 0.5} r={100} color="#ec489980" />
        </Paint>
      </Group>
    </Canvas>
  );
}

Expected output: Two translucent circles overlap with a bright Screen-blended intersection, creating a neon glow effect against the dark background — the kind of visual you'd find in a music app or gaming dashboard.

Text on Canvas

While React Native's Text component handles most text rendering, there are scenarios where you want text tightly integrated into a Skia drawing — for example, labels directly on a chart, or text with custom path-following effects.

import {
  Canvas,
  Text,
  matchFont,
  useFont,
} from '@shopify/react-native-skia';
 
export function ChartLabel({ value, x, y }: { value: string; x: number; y: number }) {
  // Load a font — in Expo, bundle fonts via expo-font first
  const font = useFont(require('../assets/fonts/Inter-SemiBold.ttf'), 14);
 
  if (!font) return null;
 
  return (
    <Canvas style={{ width: 300, height: 200 }}>
      {/* ... chart paths ... */}
      <Text
        x={x}
        y={y}
        text={value}
        font={font}
        color="#ffffff"
      />
    </Canvas>
  );
}

Keep in mind that Skia text does not support automatic line wrapping or accessibility features (screen readers). For most body content, continue using React Native's Text component. Reserve Skia text for data labels, tooltips, and decorative elements inside Canvas drawings.

Debugging Skia in Development

Skia issues can be tricky to diagnose because errors often surface as blank Canvas areas rather than thrown exceptions. Here's a systematic approach.

Enable Skia Debug Mode

In development, wrap your Canvas in a try/catch and log render errors:

import { ErrorBoundary } from 'react';
 
// A simple error boundary component
class SkiaErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  state = { hasError: false, error: null };
 
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }
 
  render() {
    if (this.state.hasError) {
      return (
        <View style={{ padding: 16, backgroundColor: '#fee2e2' }}>
          <Text style={{ color: '#991b1b' }}>
            Skia render error: {this.state.error?.message}
          </Text>
        </View>
      );
    }
    return this.props.children;
  }
}
 
// Wrap your Canvas
export function SafeChart() {
  return (
    <SkiaErrorBoundary>
      <CustomLineChart data={[...]} width={340} height={200} />
    </SkiaErrorBoundary>
  );
}

The Canvas Renders Blank

The most common cause of a blank Canvas (no error thrown) is a path with no points or a zero-dimension rect. Add a debug rect to confirm the Canvas is actually rendering:

<Canvas style={{ width: 300, height: 200 }}>
  {/* Debug: bright red fill — remove before production */}
  <Rect x={0} y={0} width={300} height={200} color="red" opacity={0.2} />
 
  {/* Your actual content */}
  <Path path={yourPath} ... />
</Canvas>

If the debug rect appears but your path doesn't, the path itself is the problem. Check that useMemo dependencies are correct and that min/max calculations aren't producing Infinity or NaN.

Error 1: Skia components outside Canvas

Error: Cannot use Skia components outside of a Canvas

All Skia primitives (Circle, Rect, Path, etc.) must be descendants of a Canvas component. There is no exception.

Error 2: RuntimeEffect.Make returns null

Skia.RuntimeEffect.Make(source) returns null on shader compilation failure. Always guard against this:

const effect = Skia.RuntimeEffect.Make(shaderSource);
if (!effect) {
  console.error('Shader compilation failed — check your SL syntax');
  return <View />;
}

If you have GLSL experience, SL syntax is nearly identical, and ShaderToy examples translate with minimal changes.

Error 3: Type mismatch between Reanimated and Skia values

react-native-reanimated SharedValue and @shopify/react-native-skia SkiaValue are different types. Bridge them with useSharedValueEffect:

import { useSharedValueEffect, useValue } from '@shopify/react-native-skia';
import { useSharedValue } from 'react-native-reanimated';
 
const reanimatedValue = useSharedValue(0);
const skiaValue = useValue(0);
 
useSharedValueEffect(() => {
  skiaValue.current = reanimatedValue.value;
}, reanimatedValue);

Real-World Integration: Healthcare and Fitness Apps

Skia shines brightest in dashboards where data needs to feel alive. A weekly step count summary, calorie burn rings, or sleep quality waves all benefit enormously from custom graphics.

// Conceptual weekly bar chart with rounded tops and goal-achieved highlights
export function WeeklyBarChart({ weekData }: { weekData: DayData[] }) {
  const chartWidth = 340;
  const chartHeight = 160;
  const barWidth = 32;
  const maxSteps = Math.max(...weekData.map((d) => d.steps));
 
  const bars = useMemo(() =>
    weekData.map((day, i) => {
      const x = 10 + i * (barWidth + 8);
      const barHeight = (day.steps / maxSteps) * chartHeight * 0.8;
      const y = chartHeight - barHeight;
      const path = Skia.Path.Make();
      path.addRRect({
        rect: { x, y, width: barWidth, height: barHeight },
        rx: 8, ry: 8,
      });
      return { path, achieved: day.steps >= day.goal };
    }), [weekData]
  );
 
  return (
    <Canvas style={{ width: chartWidth, height: chartHeight }}>
      {bars.map((bar, i) => (
        <Path key={i} path={bar.path} color={bar.achieved ? '#10b981' : '#6366f1'}>
          {bar.achieved && (
            <LinearGradient
              start={vec(0, 0)}
              end={vec(0, chartHeight)}
              colors={['#34d399', '#10b981']}
            />
          )}
        </Path>
      ))}
    </Canvas>
  );
}

Wrapping Up

React Native Skia is one of the most powerful tools available to Rork Max developers today — and it's still underused precisely because the learning curve feels steep. But as this guide shows, the core patterns are entirely learnable, and the payoff in visual quality is substantial.

To recap what we covered: Canvas fundamentals and the Paint model; custom data charts using generated paths and gradient fills; glassmorphism and multi-layer visual effects; interactive animations by bridging Reanimated with Skia's value system; GPU-level shader effects via Skia Shader Language; and the performance rules that keep everything running smoothly.

Start small — drop a CustomLineChart into your next feature and see how users respond. Once you get a feel for the Canvas mental model, progressively layering in gradients, animations, and eventually shaders will feel natural rather than intimidating.

Thank You for Reading

Rork Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.

✦Copy-paste ready implementation code
✦New advanced guides published daily
✦$5/mo or $10 for lifetime access

View Membership →