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 the engineer uses React Native's transform system to implement a 3D card flip component. The focus is on proper usage of transform properties including rotateY for rotation, perspective for 3D depth, and backfaceVisibility for controlling face visibility.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Transform property usage",
"description": "Uses the 'transform' style property correctly on View components to apply 3D transformations",
"max_score": 15
},
{
"name": "Y-axis rotation (rotateY)",
"description": "Uses 'rotateY' transform to rotate the card 180 degrees for the flip effect (e.g., rotateY: '180deg')",
"max_score": 25
},
{
"name": "Perspective transform",
"description": "Applies 'perspective' transform to create depth and 3D visual effect (e.g., perspective: 1000)",
"max_score": 20
},
{
"name": "Back face rotation",
"description": "Applies initial 180-degree rotateY transform to the back face so it displays correctly when flipped",
"max_score": 20
},
{
"name": "Backface visibility",
"description": "Uses 'backfaceVisibility: hidden' style property to hide the back side of each face when not visible",
"max_score": 20
}
]
}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