Setting Up Skia: Canvas and Your First Shape
Skia is the same 2D graphics engine that powers Chrome, Android, and Flutter, drawing directly on the GPU instead of going through React Native's normal View/Text tree. React Native Skia (@shopify/react-native-skia) brings that engine into your Expo app, and it's the tool of choice whenever you need buttery-smooth custom graphics or animation that plain React Native views can't keep up with.
Installing Skia in an Expo app
npx expo install @shopify/react-native-skiaThe Canvas
Everything Skia draws lives inside a <Canvas>, a special component that owns its own GPU surface. Shapes are its children, described declaratively just like regular JSX:
import { Canvas, Circle } from '@shopify/react-native-skia';
import { StyleSheet } from 'react-native';
export function FirstShape() {
return (
<Canvas style={styles.canvas}>
<Circle cx={100} cy={100} r={50} color="#22d3ee" />
</Canvas>
);
}
const styles = StyleSheet.create({
canvas: { flex: 1 },
});
cx/cy set the circle's center, r its radius, both in the Canvas's own coordinate space, not the screen, so a Canvas sized 300x300 has its own local (0,0) to (300,300) grid regardless of where it sits on screen.
WARNING
A <Canvas> needs an explicit size (from style or a parent with a fixed size) to render anything. An unconstrained Canvas (e.g. inside a View with no flex or dimensions) draws nothing.
Why not just use View and CSS-like styles?
Regular React Native views re-render through the normal React/Yoga layout pipeline on every change, fine for UI, too slow for continuous animation like particle effects or a physics-driven loading spinner. Skia shapes are drawn straight to the GPU and can update at 60-120fps without ever touching React's render cycle, that's the whole point of the rest of this course.