CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-react-native

A framework for building native apps using React

Overall
score

100%

Evaluation100%

1.06x

Agent success when using this tile

Overview
Eval results
Files

rubric.jsonevals/scenario-4/

{
  "context": "This criteria evaluates how well the engineer uses React Native's list performance optimization features, specifically VirtualizedList (or FlatList) and getItemLayout, to efficiently render large product catalogs.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Uses FlatList/VirtualizedList",
      "description": "Uses FlatList or VirtualizedList component (not ScrollView) to enable virtualization of list items for efficient memory usage when rendering thousands of products.",
      "max_score": 30
    },
    {
      "name": "Implements getItemLayout",
      "description": "Provides a getItemLayout function prop to the list component that returns the exact layout information (length: 120, offset, index) for each item, enabling the list to skip expensive layout calculations.",
      "max_score": 40
    },
    {
      "name": "Extracts keyExtractor",
      "description": "Provides a keyExtractor function that returns the unique product.id for each item, ensuring proper item identification and rendering optimization.",
      "max_score": 15
    },
    {
      "name": "Implements renderItem",
      "description": "Provides a renderItem function prop that renders individual product items with the correct data structure (receives {item, index} parameter from the list component).",
      "max_score": 15
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native@1000.0.0

tile.json