feat: add flashlist evals

evals/lists/08-rn-flashlist-basic-list/app/App.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const ITEMS = [
+  { id: 'item-1', title: 'Shift overview', subtitle: 'Morning operations' },
+  { id: 'item-2', title: 'Driver queue', subtitle: 'Pending check-ins' },
+  { id: 'item-3', title: 'Returns desk', subtitle: 'Open incidents' },
+  { id: 'item-4', title: 'Stock audit', subtitle: 'Afternoon checklist' },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Overview</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+})

evals/lists/08-rn-flashlist-basic-list/prompt.md

@@ -0,0 +1 @@
+Render a basic vertical list with `@shopify/flash-list`.

evals/lists/08-rn-flashlist-basic-list/reference/App.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import { FlashList } from '@shopify/flash-list'
+
+const ITEMS = [
+  { id: 'item-1', title: 'Shift overview', subtitle: 'Morning operations' },
+  { id: 'item-2', title: 'Driver queue', subtitle: 'Pending check-ins' },
+  { id: 'item-3', title: 'Returns desk', subtitle: 'Open incidents' },
+  { id: 'item-4', title: 'Stock audit', subtitle: 'Afternoon checklist' },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Overview</Text>
+      <FlashList
+        data={ITEMS}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.row}>
+              <Text style={styles.rowTitle}>{item.title}</Text>
+              <Text style={styles.rowSubtitle}>{item.subtitle}</Text>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    marginBottom: 10,
+    padding: 14,
+  },
+  rowSubtitle: {
+    color: '#475569',
+    marginTop: 4,
+  },
+  rowTitle: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 12,
+  },
+})

evals/lists/08-rn-flashlist-basic-list/requirements.yaml

@@ -0,0 +1,11 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: implementation-render-flashlist
+    description: Must import `FlashList` from `@shopify/flash-list`.
+  - id: items-rendered-through-flashlist
+    description: Must render the list through `FlashList`.
+  - id: implementation-provide-flashlist-key-extractor
+    description: Must provide FlashList `keyExtractor` using stable item ids.

evals/lists/09-rn-flashlist-horizontal-rail-list-header/app/App.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const VIDEOS = Array.from({ length: 8 }, (_, index) => ({
+  id: `video-${index + 1}`,
+  title: `Watchlist ${index + 1}`,
+}))
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Up next</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    marginRight: 12,
+    padding: 12,
+    width: 172,
+  },
+  cardTitle: {
+    color: '#0f172a',
+    fontWeight: '700',
+    marginTop: 10,
+  },
+  poster: {
+    backgroundColor: '#dbeafe',
+    borderRadius: 14,
+    height: 180,
+  },
+  screen: {
+    backgroundColor: '#eff6ff',
+    flex: 1,
+    paddingLeft: 16,
+    paddingTop: 56,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 14,
+  },
+})

evals/lists/09-rn-flashlist-horizontal-rail-list-header/prompt.md

@@ -0,0 +1 @@
+Implement a basic horizontal media rail with `@shopify/flash-list` and a leading header card.

evals/lists/09-rn-flashlist-horizontal-rail-list-header/reference/App.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { FlashList } from '@shopify/flash-list'
+
+const VIDEOS = Array.from({ length: 8 }, (_, index) => ({
+  id: `video-${index + 1}`,
+  title: `Watchlist ${index + 1}`,
+}))
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Up next</Text>
+      <FlashList
+        data={VIDEOS}
+        horizontal
+        keyExtractor={(item) => item.id}
+        ListHeaderComponent={
+          <View style={styles.headerCard}>
+            <Text style={styles.headerEyebrow}>For you</Text>
+            <Text style={styles.headerTitle}>Curated picks</Text>
+          </View>
+        }
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.card}>
+              <View style={styles.poster} />
+              <Text style={styles.cardTitle}>{item.title}</Text>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    marginRight: 12,
+    padding: 12,
+    width: 172,
+  },
+  cardTitle: {
+    color: '#0f172a',
+    fontWeight: '700',
+    marginTop: 10,
+  },
+  headerCard: {
+    backgroundColor: '#111827',
+    borderRadius: 18,
+    marginRight: 12,
+    padding: 16,
+    width: 172,
+  },
+  headerEyebrow: {
+    color: '#93c5fd',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  headerTitle: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: '700',
+    marginTop: 10,
+  },
+  poster: {
+    backgroundColor: '#dbeafe',
+    borderRadius: 14,
+    height: 180,
+  },
+  screen: {
+    backgroundColor: '#eff6ff',
+    flex: 1,
+    paddingLeft: 16,
+    paddingTop: 56,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 14,
+  },
+})

evals/lists/09-rn-flashlist-horizontal-rail-list-header/requirements.yaml

@@ -0,0 +1,13 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: implementation-render-flashlist
+    description: Must render the rail with `FlashList`.
+  - id: implementation-provide-flashlist-key-extractor
+    description: Must provide FlashList `keyExtractor` using stable item ids.
+  - id: horizontal-list-enabled
+    description: Must configure the `FlashList` as a horizontal list.
+  - id: list-header-component-renders-leading-card
+    description: Must render the leading header card through `ListHeaderComponent`.

evals/lists/10-rn-flashlist-horizontal-dynamic-height-header-first-item/app/App.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const VIDEOS = [
+  { id: 'video-1', title: 'Watchlist 1', height: 180 },
+  { id: 'video-2', title: 'Watchlist 2', height: 220 },
+  { id: 'video-3', title: 'Watchlist 3', height: 160 },
+  { id: 'video-4', title: 'Watchlist 4', height: 240 },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Up next</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    justifyContent: 'flex-end',
+    marginRight: 12,
+    padding: 12,
+    width: 172,
+  },
+  cardTitle: {
+    color: '#0f172a',
+    fontWeight: '700',
+  },
+  headerCard: {
+    backgroundColor: '#111827',
+    borderRadius: 18,
+    justifyContent: 'space-between',
+    marginRight: 12,
+    padding: 16,
+    width: 172,
+  },
+  headerEyebrow: {
+    color: '#93c5fd',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  headerTitle: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: '700',
+    marginTop: 10,
+  },
+  screen: {
+    backgroundColor: '#eff6ff',
+    flex: 1,
+    paddingLeft: 16,
+    paddingTop: 56,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 14,
+  },
+})

evals/lists/10-rn-flashlist-horizontal-dynamic-height-header-first-item/prompt.md

@@ -0,0 +1,2 @@
+Implement a horizontal media rail with `@shopify/flash-list` and a leading header card.
+The media cards have dynamic, non-fixed heights, so the header should work correctly for that layout.