react-native-swipe-cards-stack/lib/types.d.ts

A highly customizable, performant swipeable cards stack component for React Native.

export type SwipeableCardData = any;
export interface SwipeIcons {
    leftSwipeIcon?: React.ReactNode;
    rightSwipeIcon?: React.ReactNode;
    upSwipeIcon?: React.ReactNode;
    downSwipeIcon?: React.ReactNode;
    leftSwipeIconStyle?: any;
    rightSwipeIconStyle?: any;
    upSwipeIconStyle?: any;
    downSwipeIconStyle?: any;
    tickIcon?: React.ReactNode;
    crossIcon?: React.ReactNode;
    upIcon?: React.ReactNode;
    downIcon?: React.ReactNode;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
    showTickIcon?: boolean;
    showCrossIcon?: boolean;
    showUpIcon?: boolean;
    showDownIcon?: boolean;
    showLeftIcon?: boolean;
    showRightIcon?: boolean;
    tickIconStyle?: any;
    crossIconStyle?: any;
    upIconStyle?: any;
    downIconStyle?: any;
    leftIconStyle?: any;
    rightIconStyle?: any;
    iconPosition?: 'center' | 'top' | 'bottom' | 'custom';
    customIconPosition?: {
        top?: number | string;
        left?: number | string;
        right?: number | string;
        bottom?: number | string;
    };
}
export interface SwipeThresholds {
    horizontal?: number;
    vertical?: number;
    iconDelay?: number;
    rotationThreshold?: number;
    velocity?: number;
}
export interface SwipeAnimations {
    duration?: number;
    easing?: any;
    useNativeDriver?: boolean;
    rotationEnabled?: boolean;
    scaleEnabled?: boolean;
    opacityEnabled?: boolean;
}
export interface SwipeCallbacks {
    onSwipe?: (direction: 'left' | 'right' | 'up' | 'down', item: SwipeableCardData, index: number) => void;
    onSwipeStart?: (item: SwipeableCardData, direction: 'left' | 'right' | 'up' | 'down') => void;
    onSwipeEnd?: (item: SwipeableCardData, direction: 'left' | 'right' | 'up' | 'down') => void;
    onStackEmpty?: () => void;
    onCardFocus?: (item: SwipeableCardData, index: number) => void;
    onAnimationComplete?: (direction: 'left' | 'right' | 'up' | 'down', item: SwipeableCardData) => void;
    onTap?: (item: SwipeableCardData, index: number) => void;
    onEmpty?: () => void;
}
export interface SwipeGestures {
    swipeDirections?: ('left' | 'right' | 'up' | 'down')[];
    enableRotation?: boolean;
    enableScale?: boolean;
    gestureThreshold?: number;
    simultaneousGestures?: boolean;
    allowPartialSwipe?: boolean;
    partialSwipeReturnDuration?: number;
    partialSwipeReturnEasing?: any;
}
export interface StackBehavior {
    stackSize?: number;
}
export interface AccessibilityOptions {
    accessibilityLabel?: string;
    accessibilityHint?: string;
    accessibilityRole?: string;
}
export interface SwipeableCardsStackProps {
    data: SwipeableCardData[];
    renderCard: (card: SwipeableCardData, index: number, isActive: boolean) => React.ReactNode;
    keyExtractor?: (item: SwipeableCardData, index: number) => string;
    emptyComponent?: () => React.ReactNode;
    onEmpty?: () => void;
    cardStyle?: any;
    containerStyle?: any;
    activeCardStyle?: any;
    inactiveCardStyle?: any;
    cardDimensions?: {
        width?: number | string;
        height?: number | string;
    };
    swipeIcons?: SwipeIcons;
    leftSwipeIcon?: React.ReactNode;
    rightSwipeIcon?: React.ReactNode;
    upSwipeIcon?: React.ReactNode;
    downSwipeIcon?: React.ReactNode;
    leftSwipeIconStyle?: any;
    rightSwipeIconStyle?: any;
    upSwipeIconStyle?: any;
    downSwipeIconStyle?: any;
    thresholds?: SwipeThresholds;
    animations?: SwipeAnimations;
    callbacks?: SwipeCallbacks;
    onSwipe?: (direction: 'left' | 'right' | 'up' | 'down', item: SwipeableCardData, index: number) => void;
    onTap?: (item: SwipeableCardData, index: number) => void;
    tapActiveOpacity?: number;
    gestures?: SwipeGestures;
    stackBehavior?: StackBehavior;
    resetTrigger?: number;
    currentIndex?: number;
    onIndexChange?: (index: number) => void;
    accessibility?: AccessibilityOptions;
    enableUpSwipe?: boolean;
    rotationEnabled?: boolean;
    animationDuration?: number;
    stackSize?: number;
}