feat: evals for react-native-apis

README.md

@@ -11,7 +11,7 @@ Groups map to top-level folders under `evals/`.
 | animation | `evals/animation` | Active |
 | async-state | `evals/async-state` | Active | 
 | navigation | `evals/navigation` | Active |
-| react-native-apis | `evals/react-native-apis` | WIP |
+| react-native-apis | `evals/react-native-apis` | Active |
 | expo-sdk | `evals/expo-sdk` | WIP |
 | nitro-modules | `evals/nitro-modules` | WIP |
 | lists | `evals/lists` | Active |

evals/react-native-apis/01-rn-stylesheet-card-variants/app/App.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+const CARDS = [
+  {
+    id: 'card-1',
+    status: 'On schedule',
+    title: 'City route handoff',
+  },
+  {
+    id: 'card-2',
+    highlighted: true,
+    status: 'Delayed',
+    title: 'Warehouse transfer',
+  },
+]
+
+export default function App() {
+  return (
+    <View>
+      <Text>Status</Text>
+      {CARDS.map((card) => {
+        return (
+          <View key={card.id}>
+            <Text>{card.title}</Text>
+            <Text>{card.status}</Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}

evals/react-native-apis/01-rn-stylesheet-card-variants/prompt.md

@@ -0,0 +1,3 @@
+Add styles for the two status cards: a normal card and a highlighted card.
+The base card should use a light gray border.
+The highlighted card should keep the same base styling and change the border to red.

evals/react-native-apis/01-rn-stylesheet-card-variants/reference/App.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const CARDS = [
+  {
+    id: 'card-1',
+    status: 'On schedule',
+    title: 'City route handoff',
+  },
+  {
+    id: 'card-2',
+    highlighted: true,
+    status: 'Delayed',
+    title: 'Warehouse transfer',
+  },
+]
+
+export default function App() {
+  return (
+    <View>
+      <Text>Status</Text>
+      {CARDS.map((card) => {
+        return (
+          <View
+            key={card.id}
+            style={[styles.card, card.highlighted && styles.cardHighlighted]}
+          >
+            <Text>{card.title}</Text>
+            <Text>{card.status}</Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderColor: '#cbd5e1',
+    borderWidth: 2,
+    borderRadius: 16,
+    padding: 16,
+  },
+  cardHighlighted: {
+    borderColor: '#dc2626',
+  },
+})

evals/react-native-apis/01-rn-stylesheet-card-variants/requirements.yaml

@@ -0,0 +1,11 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: implementation-render-stylesheet-create
+    description: Must define styles with `StyleSheet.create(...)`.
+  - id: base-card-and-highlight-diff-style
+    description: Must define a base card style and a highlighted diff style instead of two full separate card styles.
+  - id: highlighted-style-conditionally-extends-base-card
+    description: Must conditionally extend the base card style for highlighted cards instead of using separate standalone card styles.

evals/react-native-apis/02-rn-stylesheet-absolute-fill-overlay-badge/app/App.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const CARD = {
+  title: 'Dispatch inbox',
+}
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Inbox</Text>
+      <View style={styles.card}>
+        <View style={styles.thumbnail} />
+        <Text style={styles.cardTitle}>{CARD.title}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    overflow: 'hidden',
+  },
+  cardTitle: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+    padding: 14,
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  thumbnail: {
+    backgroundColor: '#cbd5e1',
+    height: 160,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 12,
+  },
+})

evals/react-native-apis/02-rn-stylesheet-absolute-fill-overlay-badge/prompt.md

@@ -0,0 +1,2 @@
+Add an overlay on top of the thumbnail card that says `Login required`.
+The overlay should cover the thumbnail with a black background at 50% opacity.

evals/react-native-apis/02-rn-stylesheet-absolute-fill-overlay-badge/reference/App.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const CARD = {
+  title: 'Dispatch inbox',
+}
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Inbox</Text>
+      <View style={styles.card}>
+        <View style={styles.thumbnail} />
+        <View pointerEvents="none" style={styles.overlay}>
+          <Text style={styles.overlayText}>Login required</Text>
+        </View>
+        <Text style={styles.cardTitle}>{CARD.title}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    justifyContent: 'center',
+  },
+  overlayText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    overflow: 'hidden',
+  },
+  cardTitle: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+    padding: 14,
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  thumbnail: {
+    backgroundColor: '#cbd5e1',
+    height: 160,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 12,
+  },
+})

evals/react-native-apis/02-rn-stylesheet-absolute-fill-overlay-badge/requirements.yaml

@@ -0,0 +1,9 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: overlay-covers-thumbnail-with-stylesheet-helper
+    description: Must position the thumbnail overlay with `StyleSheet.absoluteFill`.
+  - id: overlay-background-color-rgba
+    description: Must have a background color of `rgba(0, 0, 0, 0.5)`.

evals/react-native-apis/03-rn-stylesheet-divider-hairline/app/App.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Settings</Text>
+      <View style={styles.panel}>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>Notifications</Text>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>Theme</Text>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>Privacy</Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  panel: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  row: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+  },
+  rowLabel: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 12,
+  },
+})

evals/react-native-apis/03-rn-stylesheet-divider-hairline/prompt.md

@@ -0,0 +1,2 @@
+Add a divider between each settings rows.
+The divider should be a thin hairline separator and have black color.

evals/react-native-apis/03-rn-stylesheet-divider-hairline/reference/App.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+function Divider() {
+  return <View style={styles.divider} />
+}
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Settings</Text>
+      <View style={styles.panel}>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>Notifications</Text>
+        </View>
+        <Divider />
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>Theme</Text>
+        </View>
+        <Divider />
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>Privacy</Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  panel: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  divider: {
+    backgroundColor: '#000',
+    height: StyleSheet.hairlineWidth,
+  },
+  row: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+  },
+  rowLabel: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 12,
+  },
+})

evals/react-native-apis/03-rn-stylesheet-divider-hairline/requirements.yaml

@@ -0,0 +1,11 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: reusable-divider-component-present
+    description: Must render a divider component between each row.
+  - id: divider-uses-hairline-width
+    description: Must use `StyleSheet.hairlineWidth` for the divider thickness.
+  - id: divider-color-light-gray
+    description: Must use backgroundColor for the divider color.