feat: add flatlist and sectionlist evals

README.md

@@ -14,7 +14,7 @@ Groups map to top-level folders under `evals/`.
 | react-native-apis | `evals/react-native-apis` | WIP |
 | expo-sdk | `evals/expo-sdk` | WIP |
 | nitro-modules | `evals/nitro-modules` | WIP |
-| lists | `evals/lists` | WIP |
+| lists | `evals/lists` | Active |
 
 > Want a group that is not listed here? [Open an issue](https://github.com/callstackincubator/evals/issues/new/choose) to request it. Contributions are also welcome.
 

evals/lists/01-rn-flatlist-scroll-to-unread-fixed-rows/app/App.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const MESSAGES = Array.from({ length: 18 }, (_, index) => ({
+  id: `message-${index + 1}`,
+  sender: index % 2 === 0 ? 'Maya' : 'Inbox Bot',
+  preview: `Message preview ${index + 1}`,
+  unread: index >= 9 && index <= 11,
+}))
+
+export default function App() {
+  return (
+    <View style={styles.screen}></View>
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#e2e8f0',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+})

evals/lists/01-rn-flatlist-scroll-to-unread-fixed-rows/prompt.md

@@ -0,0 +1 @@
+Build an inbox screen with `FlatList` that opens scrolled to the first unread message.

evals/lists/01-rn-flatlist-scroll-to-unread-fixed-rows/reference/App.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+const ROW_HEIGHT = 72
+const SEPARATOR_HEIGHT = 10
+
+const MESSAGES = Array.from({ length: 18 }, (_, index) => ({
+  id: `message-${index + 1}`,
+  sender: index % 2 === 0 ? 'Maya' : 'Inbox Bot',
+  preview: `Message preview ${index + 1}`,
+  unread: index >= 9 && index <= 11,
+}))
+
+export default function App() {
+  const firstUnreadIndex = MESSAGES.findIndex((message) => message.unread)
+
+  return (
+    <View style={styles.screen}>
+      <FlatList
+        data={MESSAGES}
+        getItemLayout={(_, index) => ({
+          index,
+          length: ROW_HEIGHT + SEPARATOR_HEIGHT,
+          offset: (ROW_HEIGHT + SEPARATOR_HEIGHT) * index,
+        })}
+        initialScrollIndex={firstUnreadIndex === -1 ? 0 : firstUnreadIndex}
+        ItemSeparatorComponent={() => <View style={styles.separator} />}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.row}>
+              <Text style={styles.sender}>{item.sender}</Text>
+              <Text style={styles.preview}>{item.preview}</Text>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  preview: {
+    color: '#475569',
+    marginTop: 6,
+  },
+  row: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    height: ROW_HEIGHT,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  screen: {
+    backgroundColor: '#e2e8f0',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+  sender: {
+    color: '#0f172a',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  separator: {
+    height: SEPARATOR_HEIGHT,
+  },
+})

evals/lists/01-rn-flatlist-scroll-to-unread-fixed-rows/requirements.yaml

@@ -0,0 +1,15 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: inbox-rendered-through-flatlist
+    description: Must render the inbox messages through `FlatList`.
+  - id: initial-scroll-index-from-first-unread
+    description: Must compute the first unread message index from the data array and pass it to `FlatList` via `initialScrollIndex`.
+  - id: no-unread-fallback-starts-at-top
+    description: If there are no unread messages, must fall back to starting the list at the top instead of passing an invalid unread index.
+  - id: fixed-row-get-item-layout
+    description: Must provide `getItemLayout` with deterministic `length` and `offset` values based on fixed row height and separator spacing.
+  - id: implementation-use-flatlist-key-extractor
+    description: Must provide FlatList `keyExtractor` using stable message ids.

evals/lists/02-rn-flatlist-basic-contact-list/app/App.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const CONTACTS = [
+  { id: 'contact-1', name: 'Alicia Stone', role: 'Design' },
+  { id: 'contact-2', name: 'Brandon White', role: 'Support' },
+  { id: 'contact-3', name: 'Carmen Ford', role: 'Engineering' },
+  { id: 'contact-4', name: 'Diego Park', role: 'Finance' },
+  { id: 'contact-5', name: 'Elena Hall', role: 'Operations' },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}></View>
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+})

evals/lists/02-rn-flatlist-basic-contact-list/prompt.md

@@ -0,0 +1 @@
+Render a simple vertical contact list with `FlatList`.

evals/lists/02-rn-flatlist-basic-contact-list/reference/App.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+const CONTACTS = [
+  { id: 'contact-1', name: 'Alicia Stone', role: 'Design' },
+  { id: 'contact-2', name: 'Brandon White', role: 'Support' },
+  { id: 'contact-3', name: 'Carmen Ford', role: 'Engineering' },
+  { id: 'contact-4', name: 'Diego Park', role: 'Finance' },
+  { id: 'contact-5', name: 'Elena Hall', role: 'Operations' },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <FlatList
+        data={CONTACTS}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.row}>
+              <Text style={styles.name}>{item.name}</Text>
+              <Text style={styles.role}>{item.role}</Text>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  name: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  role: {
+    color: '#475569',
+    marginTop: 4,
+  },
+  row: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    marginBottom: 10,
+    padding: 14,
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+})

evals/lists/02-rn-flatlist-basic-contact-list/requirements.yaml

@@ -0,0 +1,11 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: contacts-rendered-through-flatlist
+    description: Must render the contacts through `FlatList`.
+  - id: contact-name-and-role-visible
+    description: Must render each contact row with both the contact name and role.
+  - id: implementation-use-flatlist-key-extractor
+    description: Must provide FlatList `keyExtractor` using stable contact ids.

evals/lists/03-rn-flatlist-two-column-product-grid/app/App.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const PRODUCTS = Array.from({ length: 8 }, (_, index) => ({
+  id: `product-${index + 1}`,
+  name: `Everyday Item ${index + 1}`,
+  price: `$${(24 + index * 3).toFixed(2)}`,
+}))
+
+export default function App() {
+  return (
+    <View style={styles.screen}></View>
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#eff6ff',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  subtitle: {
+    color: '#334155',
+    marginTop: 6,
+    textAlign: 'center',
+  },
+})

evals/lists/03-rn-flatlist-two-column-product-grid/prompt.md

@@ -0,0 +1 @@
+Create a two-column product catalog with `FlatList`.

evals/lists/03-rn-flatlist-two-column-product-grid/reference/App.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+const PRODUCTS = Array.from({ length: 8 }, (_, index) => ({
+  id: `product-${index + 1}`,
+  name: `Everyday Item ${index + 1}`,
+  price: `$${(24 + index * 3).toFixed(2)}`,
+}))
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <FlatList
+        columnWrapperStyle={styles.columnWrapper}
+        contentContainerStyle={styles.content}
+        data={PRODUCTS}
+        keyExtractor={(item) => item.id}
+        numColumns={2}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.card}>
+              <View style={styles.thumbnail} />
+              <Text style={styles.name}>{item.name}</Text>
+              <Text style={styles.price}>{item.price}</Text>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    flex: 1,
+    padding: 12,
+  },
+  columnWrapper: {
+    gap: 12,
+    marginBottom: 12,
+  },
+  content: {
+    paddingBottom: 20,
+  },
+  name: {
+    color: '#0f172a',
+    fontSize: 15,
+    fontWeight: '600',
+    marginTop: 10,
+  },
+  price: {
+    color: '#2563eb',
+    marginTop: 6,
+  },
+  screen: {
+    backgroundColor: '#eff6ff',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+  thumbnail: {
+    backgroundColor: '#bfdbfe',
+    borderRadius: 12,
+    height: 92,
+  },
+})

evals/lists/03-rn-flatlist-two-column-product-grid/requirements.yaml

@@ -0,0 +1,11 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: products-rendered-through-flatlist
+    description: Must render the product catalog through `FlatList`.
+  - id: two-column-grid-uses-numcolumns
+    description: Must configure `FlatList` with `numColumns={2}`.
+  - id: implementation-use-flatlist-key-extractor
+    description: Must provide FlatList `keyExtractor` using stable product ids.