feat(evals): add expo-sdk, expo-router, expo-ui

README.md

@@ -4,18 +4,19 @@ A benchmark suite for evaluating how coding models solve real React Native tasks
 
 ## Available Evals
 
-Groups map to top-level folders under `evals/`.
-
-| Group             | Path                      | Status |
-| ----------------- | ------------------------- | ------ |
-| animation         | `evals/animation`         | Active |
-| async-state       | `evals/async-state`       | Active |
-| navigation        | `evals/navigation`        | Active |
-| react-native-apis | `evals/react-native-apis` | Active |
-| expo-sdk          | `evals/expo-sdk`          | WIP    |
-| brownfield        | `evals/brownfield`        | WIP    |
-| nitro-modules     | `evals/nitro-modules`     | WIP    |
-| lists             | `evals/lists`             | Active |
+Groups map to top-level folders under `evals/`. The current suite contains 134 evals.
+
+| Group             | Path                      | Evals | Status |
+| ----------------- | ------------------------- | ----: | ------ |
+| animation         | `evals/animation`         |    13 | Active |
+| async-state       | `evals/async-state`       |    13 | Active |
+| expo-router       | `evals/expo-router`       |    11 | Active |
+| expo-sdk          | `evals/expo-sdk`          |    25 | Active |
+| expo-ui           | `evals/expo-ui`           |     7 | Active |
+| lists             | `evals/lists`             |    18 | Active |
+| navigation        | `evals/navigation`        |    13 | Active |
+| react-native-apis | `evals/react-native-apis` |     9 | Active |
+| skia              | `evals/skia`              |    25 | 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/expo-router/01-rn-expo-router-sdk56-react-navigation-imports/app/_layout.tsx

@@ -0,0 +1,12 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { Stack } from 'expo-router'
+
+export default function Layout() {
+  return (
+    <ThemeProvider value={DefaultTheme}>
+      <Stack screenOptions={{ headerShown: true }}>
+        <Stack.Screen name="index" options={{ title: 'Home' }} />
+      </Stack>
+    </ThemeProvider>
+  )
+}

evals/expo-router/01-rn-expo-router-sdk56-react-navigation-imports/app/index.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native'
+
+export default function Index() {
+  return (
+    <View>
+      <Text>Home</Text>
+    </View>
+  )
+}

evals/expo-router/01-rn-expo-router-sdk56-react-navigation-imports/prompt.md

@@ -0,0 +1 @@
+Migrate an Expo Router layout to SDK 56 import conventions.

evals/expo-router/01-rn-expo-router-sdk56-react-navigation-imports/reference/_layout.tsx

@@ -0,0 +1,11 @@
+import { DefaultTheme, Stack, ThemeProvider } from 'expo-router'
+
+export default function Layout() {
+  return (
+    <ThemeProvider value={DefaultTheme}>
+      <Stack screenOptions={{ headerShown: true }}>
+        <Stack.Screen name="index" options={{ title: 'Home' }} />
+      </Stack>
+    </ThemeProvider>
+  )
+}

evals/expo-router/01-rn-expo-router-sdk56-react-navigation-imports/reference/index.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native'
+
+export default function Index() {
+  return (
+    <View>
+      <Text>Home</Text>
+    </View>
+  )
+}

evals/expo-router/01-rn-expo-router-sdk56-react-navigation-imports/requirements.yaml

@@ -0,0 +1,14 @@
+version: 1
+inputs:
+  files:
+    - app/_layout.tsx
+    - app/index.tsx
+requirements:
+  - id: imports-from-expo-router
+    description: 'Must import router hooks/themes/navigation helpers from expo-router exports rather than direct @react-navigation packages.'
+  - id: no-direct-react-navigation-imports
+    description: 'Must not import from @react-navigation/native or @react-navigation/native-stack in app route files.'
+  - id: keeps-file-system-layout
+    description: 'Must keep navigation defined through Expo Router layout and route files.'
+  - id: migrates-theme-import-to-expo-router
+    description: 'Must import React Navigation theming such as ThemeProvider and DefaultTheme from expo-router itself, and keep wrapping the Stack in it, rather than dropping it, importing from @react-navigation/native, or using the deprecated expo-router/react-navigation subpath.'

evals/expo-router/02-rn-expo-router-stack-layout-not-native-stack-import/app/_layout.tsx

@@ -0,0 +1,5 @@
+import { Slot } from 'expo-router'
+
+export default function Layout() {
+  return <Slot />
+}

evals/expo-router/02-rn-expo-router-stack-layout-not-native-stack-import/app/index.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+const PRODUCT = { id: '42', name: 'Aurora Headphones' }
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{PRODUCT.name}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, gap: 12, padding: 24 },
+  title: { fontSize: 20, fontWeight: '600' },
+})

evals/expo-router/02-rn-expo-router-stack-layout-not-native-stack-import/prompt.md

@@ -0,0 +1 @@
+Set up a stack layout and add a Details screen. On the Products screen, add a button that navigates to Details and passes the product id as a route parameter. The Details screen must read that id from the route and render it.

evals/expo-router/02-rn-expo-router-stack-layout-not-native-stack-import/reference/_layout.tsx

@@ -0,0 +1,10 @@
+import { Stack } from 'expo-router'
+
+export default function Layout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ title: 'Products' }} />
+      <Stack.Screen name="details" options={{ presentation: 'card', title: 'Details' }} />
+    </Stack>
+  )
+}

evals/expo-router/02-rn-expo-router-stack-layout-not-native-stack-import/reference/details.tsx

@@ -0,0 +1,18 @@
+import { useLocalSearchParams } from 'expo-router'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Details() {
+  const { id } = useLocalSearchParams<{ id?: string }>()
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Details</Text>
+      <Text>Product {id ?? 'unknown'}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, gap: 12, padding: 24 },
+  title: { fontSize: 20, fontWeight: '600' },
+})

evals/expo-router/02-rn-expo-router-stack-layout-not-native-stack-import/reference/index.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'expo-router'
+import { StyleSheet, Text, View } from 'react-native'
+
+const PRODUCT = { id: '42', name: 'Aurora Headphones' }
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{PRODUCT.name}</Text>
+      <Link href={{ pathname: '/details', params: { id: PRODUCT.id } }}>View details</Link>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, gap: 12, padding: 24 },
+  title: { fontSize: 20, fontWeight: '600' },
+})

evals/expo-router/02-rn-expo-router-stack-layout-not-native-stack-import/requirements.yaml

@@ -0,0 +1,16 @@
+version: 1
+inputs:
+  files:
+    - app/_layout.tsx
+    - app/index.tsx
+requirements:
+  - id: uses-expo-router-stack
+    description: 'Must render Stack from expo-router in _layout.tsx and not call createNativeStackNavigator or NavigationContainer.'
+  - id: navigates-to-details
+    description: 'Must navigate from the Products screen to the details route using expo-router Link or router navigation.'
+  - id: passes-id-param
+    description: 'Must pass the product id as a route parameter when navigating to details.'
+  - id: details-reads-id-with-hook
+    description: 'The details screen must read the id from the route with useLocalSearchParams or useGlobalSearchParams.'
+  - id: details-renders-id
+    description: 'The details screen must render the received id value.'

evals/expo-router/03-rn-expo-router-stack-composition-header/app/_layout.tsx

@@ -0,0 +1,10 @@
+import { Stack } from 'expo-router'
+
+export default function Layout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="details" />
+    </Stack>
+  )
+}

evals/expo-router/03-rn-expo-router-stack-composition-header/app/details.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Details() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Details</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, gap: 12, padding: 24 },
+  title: { fontSize: 20, fontWeight: '600' },
+})

evals/expo-router/03-rn-expo-router-stack-composition-header/app/index.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'expo-router'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Inbox</Text>
+      <Text>Tap the header action to add a new item.</Text>
+      <Link href="/details">Open details</Link>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, gap: 12, padding: 24 },
+  title: { fontSize: 20, fontWeight: '600' },
+})

evals/expo-router/03-rn-expo-router-stack-composition-header/prompt.md

@@ -0,0 +1 @@
+Configure the Inbox (index) screen header from the Stack layout: set its title and add a right-side header button that shows an alert when pressed. A Details screen is pushed from the Inbox; configure it so its back button reads a custom label ("All mail") instead of the previous screen's title.

evals/expo-router/03-rn-expo-router-stack-composition-header/reference/_layout.tsx

@@ -0,0 +1,26 @@
+import { Stack } from 'expo-router'
+import { Alert, Pressable, Text } from 'react-native'
+
+export default function Layout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: 'Inbox',
+          headerRight: () => (
+            <Pressable onPress={() => Alert.alert('New item')}>
+              <Text>+</Text>
+            </Pressable>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name="details"
+        options={{
+          headerBackTitle: 'All mail',
+        }}
+      />
+    </Stack>
+  )
+}

evals/expo-router/03-rn-expo-router-stack-composition-header/reference/details.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Details() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Details</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, gap: 12, padding: 24 },
+  title: { fontSize: 20, fontWeight: '600' },
+})

evals/expo-router/03-rn-expo-router-stack-composition-header/reference/index.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'expo-router'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Inbox</Text>
+      <Text>Tap the header action to add a new item.</Text>
+      <Link href="/details">Open details</Link>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, gap: 12, padding: 24 },
+  title: { fontSize: 20, fontWeight: '600' },
+})

evals/expo-router/03-rn-expo-router-stack-composition-header/requirements.yaml

@@ -0,0 +1,17 @@
+version: 1
+inputs:
+  files:
+    - app/_layout.tsx
+    - app/index.tsx
+    - app/details.tsx
+requirements:
+  - id: uses-stack-screen-options-for-header
+    description: "Must configure the Inbox header from the Stack layout (via the screen's options or Stack.Toolbar composition), not by importing React Navigation header components into the screens."
+  - id: header-right-shows-alert
+    description: 'Must give the Inbox header a right-side pressable button (via headerRight or a Stack.Toolbar button) whose press handler calls Alert.alert.'
+  - id: sets-inbox-title
+    description: 'Must set the index (Inbox) screen title via its Stack.Screen options.'
+  - id: sets-details-back-title
+    description: "Must set headerBackTitle in the details screen's Stack.Screen options to a custom label distinct from the previous screen's title (which is the default back label) so the back button on the pushed details screen shows that custom label; setting headerBackTitle on the index screen would not affect the back button."
+  - id: no-react-navigation-header-imports
+    description: 'Must not import React Navigation header components or types directly.'

evals/expo-router/04-rn-expo-router-large-title-scroll-child/app/_layout.tsx

@@ -0,0 +1,9 @@
+import { Stack } from 'expo-router'
+
+export default function Layout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ title: 'Activity' }} />
+    </Stack>
+  )
+}

evals/expo-router/04-rn-expo-router-large-title-scroll-child/app/index.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+const ITEMS = Array.from({ length: 20 }, (_, i) => `Activity ${i + 1}`)
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      {ITEMS.map((item) => (
+        <Text key={item} style={styles.row}>
+          {item}
+        </Text>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 8 },
+  row: { fontSize: 16 },
+})

evals/expo-router/04-rn-expo-router-large-title-scroll-child/prompt.md

@@ -0,0 +1 @@
+Add a large title to the Activity screen that starts large and collapses as the list scrolls.

evals/expo-router/04-rn-expo-router-large-title-scroll-child/reference/_layout.tsx

@@ -0,0 +1,9 @@
+import { Stack } from 'expo-router'
+
+export default function Layout() {
+  return (
+    <Stack screenOptions={{ headerLargeTitleEnabled: true }}>
+      <Stack.Screen name="index" options={{ title: 'Activity' }} />
+    </Stack>
+  )
+}

evals/expo-router/04-rn-expo-router-large-title-scroll-child/reference/index.tsx

@@ -0,0 +1,20 @@
+import { ScrollView, StyleSheet, Text } from 'react-native'
+
+const ITEMS = Array.from({ length: 20 }, (_, i) => `Activity ${i + 1}`)
+
+export default function Index() {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
+      {ITEMS.map((item) => (
+        <Text key={item} style={styles.row}>
+          {item}
+        </Text>
+      ))}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 8 },
+  row: { fontSize: 16 },
+})

evals/expo-router/04-rn-expo-router-large-title-scroll-child/requirements.yaml

@@ -0,0 +1,14 @@
+version: 1
+inputs:
+  files:
+    - app/_layout.tsx
+    - app/index.tsx
+requirements:
+  - id: large-title-option
+    description: 'Must enable the large title via the Stack headerLargeTitleEnabled option (not the deprecated headerLargeTitle spelling).'
+  - id: scroll-view-first-child
+    description: 'Must make the page content start with a ScrollView or compatible scrollable child.'
+  - id: content-inset-adjustment
+    description: 'Must set contentInsetAdjustmentBehavior to automatic on the scrollable so the large title collapses correctly.'
+  - id: stack-only
+    description: 'Must use Expo Router Stack, not a manually created native stack.'