Draggable Card Component

A React Native component that implements a draggable card with gesture-based interactions. The card can be dragged around the screen and responds to pan gestures with visual feedback.

Capabilities

Drag Gesture Recognition

The component recognizes and handles drag gestures, allowing users to move the card by touching and dragging.

• When the user touches and drags the card, it moves smoothly following the touch position @test
• The card's position updates in real-time as the user's finger moves across the screen @test

Gesture State Tracking

The component tracks different gesture states and provides appropriate visual feedback.

• When the user starts touching the card, it increases in scale to 1.1 to indicate it's being touched @test
• When the user releases the card, it returns to its original scale of 1.0 @test

Position Persistence

The component maintains the card's position after gestures complete.

• After dragging and releasing, the card remains at the final dragged position @test

Implementation

@generates

API

import React from 'react';
import { ViewStyle } from 'react-native';

export interface DraggableCardProps {
  /** Initial X position of the card */
  initialX?: number;
  /** Initial Y position of the card */
  initialY?: number;
  /** Card width */
  width?: number;
  /** Card height */
  height?: number;
  /** Background color of the card */
  backgroundColor?: string;
  /** Content to display inside the card */
  children?: React.ReactNode;
}

/**
 * A draggable card component that responds to pan gestures.
 * Users can touch and drag the card around the screen.
 */
export function DraggableCard(props: DraggableCardProps): React.ReactElement;

Dependencies { .dependencies }

react-native { .dependency }

Provides gesture handling support through PanResponder and animated components for smooth interactions.

@satisfied-by