A framework for building native apps using React
Overall
score
100%
Evaluation — 100%
↑ 1.06xAgent success when using this tile
{
"context": "This evaluation assesses how well an engineer uses React Native's PanResponder API to implement gesture-based dragging interactions. The focus is on proper usage of PanResponder for touch handling, integration with the Animated API for smooth position updates and visual feedback, and correct gesture state management.",
"type": "weighted_checklist",
"checklist": [
{
"name": "PanResponder Creation",
"description": "Uses PanResponder.create() to initialize a pan responder instance that handles gesture events",
"max_score": 20
},
{
"name": "Gesture Grant Handler",
"description": "Implements onPanResponderGrant to handle touch start events, returning true to claim the responder and triggering scale animation when touch begins",
"max_score": 15
},
{
"name": "Gesture Move Handler",
"description": "Implements onPanResponderMove to track finger movement, using gestureState.dx and gestureState.dy to update the card's position during dragging",
"max_score": 20
},
{
"name": "Gesture Release Handler",
"description": "Implements onPanResponderRelease to handle touch end events, resetting the scale animation and maintaining final position",
"max_score": 15
},
{
"name": "Animated.Value Usage",
"description": "Uses Animated.Value or Animated.ValueXY to create animatable position and scale values that work with PanResponder",
"max_score": 15
},
{
"name": "Animated.View Component",
"description": "Uses Animated.View (or Animated.createAnimatedComponent) to wrap the draggable card so that animated values can be applied to its style properties",
"max_score": 10
},
{
"name": "PanResponder Handlers Attachment",
"description": "Properly attaches panHandlers using the spread operator {...panResponder.panHandlers} on the Animated.View component to enable gesture recognition",
"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