feat(evals): add skia category with 20 react-native-skia evals (#377)

* feat(evals): add skia category with 20 react-native-skia evals

* feat: default opencode port value, do not run opencode server if already up, deintegrate provider-specific code

* chore: changes after CR

* feat: add Skia evals starter templates

* feat: consistently require the canvas to be present

* chore: add missing inputs key

* fix: remove obsolete & inconsistent pieces

* feat: add evals for: Group layer + Paint + Blur, SweepGradient, ParagraphBuilder

* feat: eval for imperative canvas APIs

* refactor: consistently type port as non-nullable

* chore: update Skia README

* chore: add missing COLORS to Skia eval 21

* chore: unify declarations in Skia eval 22

* feat: add Skottie eval

* fix: resolve conflicts after merge

* fix: resolve typing issues

---------

Co-authored-by: artus9033 <artus9033@gmail.com>

Author: andriicallstack

evals/skia/01-rn-skia-canvas-fill-background/app/App.tsx

@@ -0,0 +1,13 @@
+import { Platform } from 'react-native'
+
+const FONT_SIZE = 18
+
+const fontStyle = {
+  fontFamily: Platform.select({ ios: 'Helvetica', default: 'serif' }),
+  fontSize: FONT_SIZE,
+  fontWeight: 'bold',
+} as const
+
+export default function App() {
+  return <></>
+}

evals/skia/01-rn-skia-canvas-fill-background/prompt.md

@@ -0,0 +1 @@
+Implement a full-screen Skia canvas with a solid background color using Fill. Display the current canvas width and height as centered text inside the canvas. Use useCanvasSize to read the canvas dimensions on the JS thread and position the text accordingly.

evals/skia/01-rn-skia-canvas-fill-background/reference/App.tsx

@@ -0,0 +1,35 @@
+import { Platform } from 'react-native'
+import { Canvas, Fill, Text, matchFont, useCanvasSize } from '@shopify/react-native-skia'
+
+const FONT_SIZE = 18
+
+const fontStyle = {
+  fontFamily: Platform.select({ ios: 'Helvetica', default: 'serif' }),
+  fontSize: FONT_SIZE,
+  fontWeight: 'bold',
+} as const
+
+const font = matchFont(fontStyle)
+
+function CanvasContent() {
+  const { width, height } = useCanvasSize()
+
+  const label = `${Math.round(width)} × ${Math.round(height)}`
+  const textX = width / 2 - (font?.getTextWidth(label) ?? 0) / 2
+  const textY = height / 2 + FONT_SIZE / 2
+
+  return (
+    <>
+      <Fill color='#1e293b' />
+      <Text x={textX} y={textY} text={label} font={font} color='#f8fafc' />
+    </>
+  )
+}
+
+export default function App() {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <CanvasContent />
+    </Canvas>
+  )
+}

evals/skia/01-rn-skia-canvas-fill-background/requirements.yaml

@@ -0,0 +1,13 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: uses-canvas-component
+    description: Must render all drawing content inside a Canvas component from @shopify/react-native-skia.
+  - id: uses-fill-for-background
+    description: Must use the Fill component from @shopify/react-native-skia to paint the canvas background color.
+  - id: uses-canvas-size-hook
+    description: Must use useCanvasSize from @shopify/react-native-skia to read canvas dimensions on the JS thread.
+  - id: displays-dimensions-as-text
+    description: Must render the canvas width and height as visible text inside the canvas using the Text component from @shopify/react-native-skia.

evals/skia/02-rn-skia-shape-primitives/app/App.tsx

@@ -0,0 +1,12 @@
+import { Canvas, Fill } from '@shopify/react-native-skia'
+
+const PADDING = 24
+const SHAPE_SIZE = 80
+
+export default function App() {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Fill color="#f1f5f9" />
+    </Canvas>
+  )
+}

evals/skia/02-rn-skia-shape-primitives/prompt.md

@@ -0,0 +1 @@
+Draw a composition of basic shapes on a Skia canvas: a filled rectangle, a filled circle, a rounded rectangle, and a straight line. Give each shape a distinct color and arrange them so they are all visible without overlap.

evals/skia/02-rn-skia-shape-primitives/reference/App.tsx

@@ -0,0 +1,54 @@
+import {
+  Canvas,
+  Circle,
+  Fill,
+  Line,
+  Rect,
+  RoundedRect,
+  vec,
+} from '@shopify/react-native-skia'
+
+const PADDING = 24
+const SHAPE_SIZE = 80
+
+export default function App() {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Fill color="#f1f5f9" />
+
+      <Rect
+        x={PADDING}
+        y={PADDING}
+        width={SHAPE_SIZE}
+        height={SHAPE_SIZE}
+        color="#3b82f6"
+      />
+
+      <Circle
+        cx={PADDING + SHAPE_SIZE + 40 + SHAPE_SIZE / 2}
+        cy={PADDING + SHAPE_SIZE / 2}
+        r={SHAPE_SIZE / 2}
+        color="#ef4444"
+      />
+
+      <RoundedRect
+        x={PADDING}
+        y={PADDING + SHAPE_SIZE + 24}
+        width={SHAPE_SIZE}
+        height={SHAPE_SIZE}
+        r={16}
+        color="#22c55e"
+      />
+
+      <Line
+        p1={vec(PADDING, PADDING + (SHAPE_SIZE + 24) * 2 + 40)}
+        p2={vec(
+          PADDING + SHAPE_SIZE * 2 + 40,
+          PADDING + (SHAPE_SIZE + 24) * 2 + 40
+        )}
+        color="#f59e0b"
+        strokeWidth={4}
+      />
+    </Canvas>
+  )
+}

evals/skia/02-rn-skia-shape-primitives/requirements.yaml

@@ -0,0 +1,18 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: uses-canvas-component
+    description: Must render all drawing content inside a Canvas component from @shopify/react-native-skia.
+    weight: 0.1
+  - id: uses-rect-component
+    description: Must render a Rect component from @shopify/react-native-skia.
+  - id: uses-circle-component
+    description: Must render a Circle component from @shopify/react-native-skia.
+  - id: uses-rounded-rect-component
+    description: Must render a RoundedRect or equivalent rounded rectangle component from @shopify/react-native-skia.
+  - id: uses-line-component
+    description: Must render a Line component from @shopify/react-native-skia.
+  - id: shapes-have-distinct-colors
+    description: Each shape must use a visually distinct color.

evals/skia/03-rn-skia-path-drawing/app/App.tsx

@@ -0,0 +1,11 @@
+import { Canvas, Fill } from '@shopify/react-native-skia'
+
+const STROKE_WIDTH = 4
+
+export default function App() {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Fill color="#0f172a" />
+    </Canvas>
+  )
+}

evals/skia/03-rn-skia-path-drawing/prompt.md

@@ -0,0 +1 @@
+Draw a custom Bezier curve path on a Skia canvas. Build the path imperatively using Skia.Path.Make() with moveTo and cubicTo commands, and render it as a stroked line with a visible stroke width and color.