refactor: cleanup react-native-apis evals (#375)

fix(react-native-apis): address PR feedback

Author: thymikee

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

@@ -5,5 +5,7 @@ inputs:
 requirements:
   - id: overlay-covers-thumbnail-with-stylesheet-helper
     description: Must position the thumbnail overlay with `StyleSheet.absoluteFill`.
+  - id: overlay-does-not-use-deprecated-absolute-fill-object
+    description: Must NOT use deprecated `StyleSheet.absoluteFillObject`.
   - id: overlay-background-color-rgba
     description: Must have a background color of `rgba(0, 0, 0, 0.5)`.

evals/react-native-apis/04-rn-image-network-dimensions/prompt.md

@@ -1,2 +1,3 @@
 Render an image below "Story" text.
+Use built-in React Native APIs only. Do not add external image libraries or other dependencies.
 Use `https://placehold.co/200x100.png` as the image URL. The image has dimensions of 200x100 pixels.

evals/react-native-apis/05-rn-imagebackground-resize-mode/app/banner.jpg

@@ -1,3 +1,3 @@
 Add a background image to the header.
-Use the `assets/banner.png` as path to an image.
+Use the local `./banner.jpg` file as the image source.
 The image should fill the entire header area without stretching, even if some edges are cropped.

evals/react-native-apis/05-rn-imagebackground-resize-mode/prompt.md

@@ -11,7 +11,8 @@ export default function App() {
     <View style={styles.screen}>
       <Text style={styles.title}>Overview</Text>
       <ImageBackground
-        source={require('banner.png')}
+        source={require('./banner.jpg')}
+        imageStyle={styles.headerImage}
         style={styles.header}
         resizeMode='cover'
       >
@@ -26,7 +27,10 @@ export default function App() {
 
 const styles = StyleSheet.create({
   header: {
-    flex: 1,
+    borderRadius: 20,
+    height: 200,
+    overflow: 'hidden',
+    width: 300,
   },
   headerContent: {
     flex: 1,

evals/react-native-apis/05-rn-imagebackground-resize-mode/reference/App.tsx

@@ -1,13 +1,14 @@
 version: 1
 inputs:
   files:
-    - app/banner.png
+    - app/App.tsx
+    - app/banner.jpg
 requirements:
   - id: implementation-render-imagebackground
     description: Must import and render `ImageBackground` from `react-native`.
   - id: imagebackground-uses-local-banner-asset
-    description: Must provide the background image source with static `require(...)` for `assets/banner.png`.
+    description: Must provide the background image source with static `require(...)` for `./banner.jpg`.
   - id: background-image-flex-style
-    description: Must give the background image flex styles to fill the header area.
+    description: Must size the background image to fill the existing header area.
   - id: background-image-resize-mode-cover
     description: Must set the background image `resizeMode` to `cover`.

evals/react-native-apis/05-rn-imagebackground-resize-mode/reference/banner.jpg

@@ -1,10 +1,42 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
 
 export default function App() {
   return (
-    <View>
-      <Text>Summary</Text>
+    <View style={styles.screen}>
+      <View style={styles.card}>
+        <Text style={styles.title}>Summary</Text>
+        <Text style={styles.description}>
+          Crew updates for the current shift.
+        </Text>
+      </View>
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 16,
+  },
+  description: {
+    color: '#475569',
+    marginTop: 8,
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+})

evals/react-native-apis/05-rn-imagebackground-resize-mode/requirements.yaml

@@ -1,2 +1 @@
-Add platform-specific font size for the Summary text.
-The font size should be `12` on Android, `10` on iOS, and `8` on all other platforms.
+Use `Platform.select` to apply platform-native depth styling to the summary card: iOS should use shadow props, Android should use elevation, and other platforms should use a border imitating shadow.

evals/react-native-apis/06-rn-platform-select-small-style-delta/app/App.tsx

@@ -1,20 +1,62 @@
 import React from 'react'
 import {
   Platform,
+  StyleSheet,
   Text,
   View,
 } from 'react-native'
 
-const subtitleFontSize = Platform.select({
-  android: 12,
-  default: 8,
-  ios: 10,
+const cardChrome = Platform.select({
+  android: {
+    elevation: 6,
+  },
+  default: {
+    borderColor: '#cbd5e1',
+    borderWidth: 1,
+  },
+  ios: {
+    shadowColor: '#0f172a',
+    shadowOffset: {
+      height: 6,
+      width: 0,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+  },
 })
 
 export default function App() {
   return (
-    <View>
-      <Text style={{ fontSize: subtitleFontSize }}>Summary</Text>
+    <View style={styles.screen}>
+      <View style={[styles.card, cardChrome]}>
+        <Text style={styles.title}>Summary</Text>
+        <Text style={styles.description}>
+          Crew updates for the current shift.
+        </Text>
+      </View>
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 16,
+  },
+  description: {
+    color: '#475569',
+    marginTop: 8,
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+})