webraptor / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
126 stars 81 forks source link

Events dragStart and dragEnd are documented but do not exist. #54

Open EddStrickland opened 3 years ago

EddStrickland commented 3 years ago
dragStart func function to be called when drag start  
dragEnd func function to be called when drag end

From the read me docs however these are missing within the component itself.

Have these been removed or deprecated in which case please update the docs, if not any they're missing and need to be put back in?

Thanks

EddStrickland commented 3 years ago

Having looked at this further in order to see if there's a quick fix it appears the definition file index.d.ts in the root of the component has not had these functions added to them so if they are added in to the definition file they all work correctly again.

dragStart?: () => void; dragEnd?: () => void;

need to be added into the ./index.d.ts in the root and this fixes the issue

EddStrickland commented 3 years ago

fyi this is the full code with updated definitions on lines 14 & 15.

`declare module 'react-native-deck-swiper' { import { StyleProp, ViewStyle } from 'react-native';

export interface SwiperProps<T> {
    animateCardOpacity?: boolean;
    animateOverlayLabelsOpacity?: boolean;
    backgroundColor?: string;
    cardHorizontalMargin?: number;
    cardIndex?: number;
    cards: T[];
    cardStyle?: number | object;
    cardVerticalMargin?: number;
    childrenOnTop?: boolean;
    dragEnd?: () => void;
    dragStart?: () => void;
    containerStyle?: object;
    disableBottomSwipe?: boolean;
    disableLeftSwipe?: boolean;
    disableRightSwipe?: boolean;
    disableTopSwipe?: boolean;
    horizontalSwipe?: boolean;
    horizontalThreshold?: number;
    goBackToPreviousCardOnSwipeBottom?: boolean;
    goBackToPreviousCardOnSwipeLeft?: boolean;
    goBackToPreviousCardOnSwipeRight?: boolean;
    goBackToPreviousCardOnSwipeTop?: boolean;
    infinite?: boolean;
    inputCardOpacityRangeX?: [number, number, number, number, number];
    inputCardOpacityRangeY?: [number, number, number, number, number];
    inputOverlayLabelsOpacityRangeX?: [number, number, number, number, number];
    inputOverlayLabelsOpacityRangeY?: [number, number, number, number, number];
    inputRotationRange?: [number, number, number];
    keyExtractor?: (cardData: T) => string;
    marginBottom?: number;
    marginTop?: number;
    onSwiped?: (cardIndex: number) => void;
    onSwipedAborted?: () => void;
    onSwipedAll?: () => void;
    onSwipedBottom?: (cardIndex: number) => void;
    onSwipedLeft?: (cardIndex: number) => void;
    onSwipedRight?: (cardIndex: number) => void;
    onSwipedTop?: (cardIndex: number) => void;
    onSwiping?: () => void;
    onTapCard?: (cardIndex: number) => void;
    onTapCardDeadZone?: number;
    outputCardOpacityRangeX?: [number, number, number, number, number];
    outputCardOpacityRangeY?: [number, number, number, number, number];
    outputOverlayLabelsOpacityRangeX?: [number, number, number];
    outputOverlayLabelsOpacityRangeY?: [number, number, number];
    outputRotationRange?: [string, string, string];
    overlayLabels?: object;
    overlayLabelStyle?: StyleProp<ViewStyle>;
    overlayLabelWrapperStyle?: StyleProp<ViewStyle>;
    overlayOpacityHorizontalThreshold?: number;
    overlayOpacityVerticalThreshold?: number;
    pointerEvents?: string;
    previousCardDefaultPositionX?: number;
    previousCardDefaultPositionY?: number;
    renderCard: (cardData: T, cardIndex: number) => JSX.Element | null;
    secondCardZoom?: number;
    showSecondCard?: boolean;
    stackAnimationFriction?: number;
    stackAnimationTension?: number;
    stackScale?: number;
    stackSeparation?: number;
    stackSize?: number;
    swipeAnimationDuration?: number;
    swipeBackCard?: boolean;
    topCardResetAnimationFriction?: number;
    topCardResetAnimationTension?: number;
    useViewOverflow?: boolean;
    verticalSwipe?: boolean;
    verticalThreshold?: number;
    zoomAnimationDuration?: number;
    zoomFriction?: number;
}

export default class Swiper<T> extends React.Component<SwiperProps<T>> {
    swipeLeft: (mustDecrementCardIndex?: boolean) => void;
    swipeRight: (mustDecrementCardIndex?: boolean) => void;
    swipeTop: (mustDecrementCardIndex?: boolean) => void;
    swipeBottom: (mustDecrementCardIndex?: boolean) => void;
    jumpToCardIndex: (cardIndex: number) => void;
    swipeBack: (
        cb?: (previousCardIndex: number, previousCard: T) => void
    ) => void;
}

} `

mannu2979 commented 1 year ago

Brother It is working proper, You can use it.

harveyappleton commented 1 year ago

For those using typescript, create a global.d.ts file in your src folder with the following contents to fix the Types definition:

// SwiperProps missing dragStart and dragEnd props
declare module 'react-native-deck-swiper' {
  import { type SwiperProps as RNDSSwiperProps } from 'react-native-deck-swiper';
  export interface SwiperProps<T> extends RNDSSwiperProps<T> {
    dragStart?: () => void;
    dragEnd?: () => void;
  }
}
webraptor commented 1 year ago

If they got removed from the swiper module we should remove them all together, not the other way around. If anyone’s got time for a quick PR it will be easy to merge and release