A framework for building native apps using React
Overall
score
100%
Evaluation — 100%
↑ 1.06xAgent success when using this tile
{
"context": "This criteria evaluates how well an engineer uses React Native's FlatList and SectionList components to build efficient, performant list views with appropriate props and features. The focus is on proper component selection and configuration for optimal list rendering performance.",
"type": "weighted_checklist",
"checklist": [
{
"name": "FlatList Usage",
"description": "Uses the FlatList component for the flat product list implementation",
"max_score": 20
},
{
"name": "FlatList Data Prop",
"description": "Correctly passes product data to FlatList using the 'data' prop",
"max_score": 10
},
{
"name": "FlatList RenderItem",
"description": "Implements the 'renderItem' prop with a function that renders individual product items with name, price, and thumbnail",
"max_score": 15
},
{
"name": "FlatList KeyExtractor",
"description": "Provides a 'keyExtractor' prop to uniquely identify each item using the product id",
"max_score": 10
},
{
"name": "SectionList Usage",
"description": "Uses the SectionList component for the categorized product list implementation",
"max_score": 20
},
{
"name": "SectionList Data Structure",
"description": "Correctly transforms product data into sections format with 'title' and 'data' properties for SectionList's 'sections' prop",
"max_score": 10
},
{
"name": "SectionList RenderSectionHeader",
"description": "Implements the 'renderSectionHeader' prop to display category headers",
"max_score": 10
},
{
"name": "Pull-to-Refresh Implementation",
"description": "Implements pull-to-refresh using the 'refreshing' and 'onRefresh' props on both FlatList and SectionList",
"max_score": 5
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-react-native@1000.0.0docs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10