Skip to content

Commit 470d900

Browse files
XeonBloomfieldgrabbou
XeonBloomfield
and
grabbou
authored
Merge changes in chained branches 1 -> main (#374)
* feat: add flatlist and sectionlist * chore: address reivew * feat: add flashlist evals (#367) * feat(lists): add flashlist evals 08-13 * fix(lists): use recycling state in flashlist eval 11 * update after review * Merge changes in chained branches 2 -> 1 (#373) * feat(lists): add flashlist evals 08-13 * fix(lists): use recycling state in flashlist eval 11 * update after review * feat: add legendlist evals (#368) * feat(lists): add legendlist evals 14-18 * fix(lists): use recycling state in flashlist eval 11 * update after review --------- Co-authored-by: Piotr Miłkowski <piotr.milkowski@callstack.com> * Merge changes in chained branches 3 -> 2 (#372) * feat(lists): add legendlist evals 14-18 * fix(lists): use recycling state in flashlist eval 11 * update after review * feat: evals for react-native-apis (#370) * fix(lists): use recycling state in flashlist eval 11 * chore: update * Revert "fix(lists): use recycling state in flashlist eval 11" This reverts commit 7130691. * chore: update --------- Co-authored-by: Mike Grabowski <grabbou@gmail.com> --------- Co-authored-by: Mike Grabowski <grabbou@gmail.com> --------- Co-authored-by: Mike Grabowski <grabbou@gmail.com>
1 parent b3f0728 commit 470d900

86 files changed

Lines changed: 2446 additions & 1 deletion

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Groups map to top-level folders under `evals/`.
1111
| animation | `evals/animation` | Active |
1212
| async-state | `evals/async-state` | Active |
1313
| navigation | `evals/navigation` | Active |
14-
| react-native-apis | `evals/react-native-apis` | WIP |
14+
| react-native-apis | `evals/react-native-apis` | Active |
1515
| expo-sdk | `evals/expo-sdk` | WIP |
1616
| brownfield | `evals/brownfield` | WIP |
1717
| nitro-modules | `evals/nitro-modules` | WIP |

‎bun.lock‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import { StyleSheet, View } from 'react-native'
3+
4+
const ITEMS = [
5+
{ id: 'item-1', title: 'Shift overview', subtitle: 'Morning operations' },
6+
{ id: 'item-2', title: 'Driver queue', subtitle: 'Pending check-ins' },
7+
{ id: 'item-3', title: 'Returns desk', subtitle: 'Open incidents' },
8+
{ id: 'item-4', title: 'Stock audit', subtitle: 'Afternoon checklist' },
9+
]
10+
11+
export default function App() {
12+
return (
13+
<View style={styles.screen} />
14+
)
15+
}
16+
17+
const styles = StyleSheet.create({
18+
screen: {
19+
backgroundColor: '#f8fafc',
20+
flex: 1,
21+
justifyContent: 'center',
22+
paddingHorizontal: 24,
23+
},
24+
})

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Render a basic vertical list with `@shopify/flash-list`.

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react'
2+
import {
3+
StyleSheet,
4+
Text,
5+
View,
6+
} from 'react-native'
7+
import { FlashList } from '@shopify/flash-list'
8+
9+
const ITEMS = [
10+
{ id: 'item-1', title: 'Shift overview', subtitle: 'Morning operations' },
11+
{ id: 'item-2', title: 'Driver queue', subtitle: 'Pending check-ins' },
12+
{ id: 'item-3', title: 'Returns desk', subtitle: 'Open incidents' },
13+
{ id: 'item-4', title: 'Stock audit', subtitle: 'Afternoon checklist' },
14+
]
15+
16+
export default function App() {
17+
return (
18+
<View style={styles.screen}>
19+
<FlashList
20+
data={ITEMS}
21+
keyExtractor={(item) => item.id}
22+
renderItem={({ item }) => {
23+
return (
24+
<View style={styles.row}>
25+
<Text style={styles.rowTitle}>{item.title}</Text>
26+
<Text style={styles.rowSubtitle}>{item.subtitle}</Text>
27+
</View>
28+
)
29+
}}
30+
/>
31+
</View>
32+
)
33+
}
34+
35+
const styles = StyleSheet.create({
36+
row: {
37+
backgroundColor: '#fff',
38+
borderRadius: 14,
39+
marginBottom: 10,
40+
padding: 14,
41+
},
42+
rowSubtitle: {
43+
color: '#475569',
44+
marginTop: 4,
45+
},
46+
rowTitle: {
47+
color: '#0f172a',
48+
fontSize: 16,
49+
fontWeight: '700',
50+
},
51+
screen: {
52+
backgroundColor: '#f8fafc',
53+
flex: 1,
54+
paddingHorizontal: 16,
55+
paddingTop: 56,
56+
},
57+
})

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
version: 1
2+
inputs:
3+
files:
4+
- app/App.tsx
5+
requirements:
6+
- id: implementation-render-flashlist
7+
description: Must import `FlashList` from `@shopify/flash-list`.
8+
- id: items-rendered-through-flashlist
9+
description: Must render the list through `FlashList`.
10+
- id: implementation-provide-flashlist-key-extractor
11+
description: Must provide FlashList `keyExtractor` using stable item ids.

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react'
2+
import { StyleSheet, Text, View } from 'react-native'
3+
4+
const VIDEOS = Array.from({ length: 8 }, (_, index) => ({
5+
id: `video-${index + 1}`,
6+
title: `Watchlist ${index + 1}`,
7+
}))
8+
9+
export default function App() {
10+
return (
11+
<View style={styles.screen} />
12+
)
13+
}
14+
15+
const styles = StyleSheet.create({
16+
card: {
17+
backgroundColor: '#fff',
18+
borderRadius: 18,
19+
marginRight: 12,
20+
padding: 12,
21+
width: 172,
22+
},
23+
cardTitle: {
24+
color: '#0f172a',
25+
fontWeight: '700',
26+
marginTop: 10,
27+
},
28+
poster: {
29+
backgroundColor: '#dbeafe',
30+
borderRadius: 14,
31+
height: 180,
32+
},
33+
screen: {
34+
backgroundColor: '#eff6ff',
35+
flex: 1,
36+
paddingLeft: 16,
37+
paddingTop: 56,
38+
},
39+
})

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react'
2+
import { StyleSheet, Text, View } from 'react-native'
3+
import { FlashList } from '@shopify/flash-list'
4+
5+
const VIDEOS = Array.from({ length: 8 }, (_, index) => ({
6+
id: `video-${index + 1}`,
7+
title: `Watchlist ${index + 1}`,
8+
}))
9+
10+
export default function App() {
11+
return (
12+
<View style={styles.screen}>
13+
<FlashList
14+
data={VIDEOS}
15+
horizontal
16+
keyExtractor={(item) => item.id}
17+
ListHeaderComponent={
18+
<View style={styles.headerCard}>
19+
<Text style={styles.headerEyebrow}>For you</Text>
20+
<Text style={styles.headerTitle}>Curated picks</Text>
21+
</View>
22+
}
23+
renderItem={({ item }) => {
24+
return (
25+
<View style={styles.card}>
26+
<View style={styles.poster} />
27+
<Text style={styles.cardTitle}>{item.title}</Text>
28+
</View>
29+
)
30+
}}
31+
/>
32+
</View>
33+
)
34+
}
35+
36+
const styles = StyleSheet.create({
37+
card: {
38+
backgroundColor: '#fff',
39+
borderRadius: 18,
40+
marginRight: 12,
41+
padding: 12,
42+
width: 172,
43+
},
44+
cardTitle: {
45+
color: '#0f172a',
46+
fontWeight: '700',
47+
marginTop: 10,
48+
},
49+
headerCard: {
50+
backgroundColor: '#111827',
51+
borderRadius: 18,
52+
marginRight: 12,
53+
padding: 16,
54+
width: 172,
55+
},
56+
headerEyebrow: {
57+
color: '#93c5fd',
58+
fontSize: 12,
59+
fontWeight: '700',
60+
},
61+
headerTitle: {
62+
color: '#fff',
63+
fontSize: 20,
64+
fontWeight: '700',
65+
marginTop: 10,
66+
},
67+
poster: {
68+
backgroundColor: '#dbeafe',
69+
borderRadius: 14,
70+
height: 180,
71+
},
72+
screen: {
73+
backgroundColor: '#eff6ff',
74+
flex: 1,
75+
paddingLeft: 16,
76+
paddingTop: 56,
77+
},
78+
})

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
version: 1
2+
inputs:
3+
files:
4+
- app/App.tsx
5+
requirements:
6+
- id: implementation-render-flashlist
7+
description: Must render the rail with `FlashList`.
8+
- id: implementation-provide-flashlist-key-extractor
9+
description: Must provide FlashList `keyExtractor` using stable item ids.
10+
- id: horizontal-list-enabled
11+
description: Must configure the `FlashList` as a horizontal list.
12+
- id: list-header-component-renders-leading-card
13+
description: Must render the leading header card through `ListHeaderComponent`.

0 commit comments

Comments
 (0)