How to handle fast swiping ?

[roshan-p]

For example I have 50 cards and I start to swipe all of them to left only by very fast without let the swiping animation finish. in a moment after swiped multiple times and try to drag next card the swiping animation is not working anymore and it always swipe to left without dragging and without any animation.

[raen79]

You can try to use some kind of throttling/debouncing

[abdymm]

did you fix this issue @roshan-p ? do you have sample of how to implement that in this lib @raen79 ?

[ilterugur]

I'm facing the same issue mentioned here

[abdymm]

on my end, i actually fix by this way, you can try it out https://github.com/alexbrillant/react-native-deck-swiper/issues/93#issuecomment-809916146

[ilterugur]

on my end, i actually fix by this way, you can try it out #93 (comment)

https://github.com/webraptor/react-native-deck-swiper/issues/30#issuecomment-786807292

@abdymm which is better? Your solution or this one?

I've tried this one to fix it but one of my costumers says its still not working but i am not sure if it's a valid customer review

[abdymm]

@ilterugur for me it actually doesn't matter whether you set the x,y, or no because actually after the setOffset at the bottom of it, there is a method that will setValue become {x:0, y:0} so it will not change anything

[Mohitb1426]

@abdymm I m having the same issue. when I m trying to do fast swapping after some time card not coming to its original position and when I m tapping on the card its swapping without animation

/ eslint-disable no-sequences / / eslint-disable no-unused-expressions / import React, { useContext, useEffect, useRef, useState, } from 'react'; import { Image, ScrollView, Text, TouchableOpacity, View, } from 'react-native'; import PropTypes from 'prop-types'; import Swiper from 'react-native-deck-swiper'; import { useDispatch, useSelector } from 'react-redux'; import ViewShot from 'react-native-view-shot'; import ErrorHandler from '../../../common/ErrorHandler'; import { addedCurrentAffairBookmark, comeFromBookmark, getCurrentAffairsData, openCurrentAffairsModal, setCurrentAffairsBookmark, setCurrentDate, setIsLoading, } from '../actionCurrentAffairs'; import { getFormattedDate } from '../../../common/TimeUtils'; import CurrentAffairsCardItem from '../CurrentAffairsSwiperCardItem'; import { DEFAULT_STACK_SIZE, STACK_SIZE_TWO } from '../ConstantCurrentAffairs'; import { CustomModal, EmptyListComponent } from '../../../components'; import { LocalizationContext } from '../../../common/LocalizationProvider'; import styles from './style'; import { screenHeightDefault } from '../../../common/Dimensions'; import useThemedStyles from '../../../hooks/useThemedStyles'; import SvgIcon from '../../../common/SvgIcon'; import { ThemeContext } from '../../../common/ThemeProvider'; import { constants } from '../../QuizResultAnswerScreen/constantsQuizResult'; import { debugLog } from '../../../common/Logger';

function CurrentAffairsSwiperCard({ index, setDate, initialId, isParam, }) { const { appTheme } = useContext(ThemeContext); const Styles = useThemedStyles(styles); const [disableLeftSwipe, setDisableLeftSwipe] = useState(false); const [disableRightSwipe, setDisableRightSwipe] = useState(false); const [swipedCard, setSwipedCard] = useState(0); const { translations, appLanguage } = useContext(LocalizationContext); const currentAffairsState = useSelector((state) => state.reducerCurrentAffairs); const dispatch = useDispatch(); const ref = useRef(); const { currentAffairsData, currentDate, availableDates, autoCurrentIndex, errorData, noInternet, openCurrentAffairModal, comeFromBookmarkButton, currentAffairsContent, } = currentAffairsState; const cardDataLength = currentAffairsData[index]?.data?.length; const cardStackSize = cardDataLength > STACK_SIZE_TWO ? DEFAULT_STACK_SIZE : cardDataLength; const isData = cardDataLength > 0; const viewShotRef = useRef(); const imageUrl = currentAffairsContent?.image?.trim();

useEffect(() => { const currentDateValue = typeof (autoCurrentIndex) === 'string' ? autoCurrentIndex : ''; const dateValue = currentDateValue || currentAffairsData[index]?.date; if (currentDateValue !== '') { dispatch(setCurrentDate(autoCurrentIndex)); } if (currentAffairsData[index] != null && cardDataLength === 0 && errorData === '') { dispatch(getCurrentAffairsData({ date: dateValue, index })); } }, [isParam]); useEffect(() => { const currentDateValue = typeof (autoCurrentIndex) === 'string' ? autoCurrentIndex : ''; if (currentDateValue !== '') { // eslint-disable-next-line no-underscore-dangle const cardIndex = currentAffairsData[index]?.data.findIndex((item) => item._id === initialId); ref?.current?.jumpToCardIndex(cardIndex); } }, [isParam]);

const swipeRight = () => { if (!disableRightSwipe) { dispatch(setIsLoading()); const currentDateIndex = availableDates.indexOf(currentDate); const endDate = availableDates[currentDateIndex - 1]; swipeCurrentAffairsData(endDate, currentDateIndex + 1); } };

const swipeLeft = () => { if (!disableLeftSwipe) { dispatch(setIsLoading()); const currentDateIndex = availableDates.indexOf(currentDate); const endDate = availableDates[currentDateIndex + 1]; swipeCurrentAffairsData(endDate); } };

const swipeCurrentAffairsData = (date) => { setDate(date, 0); };

useEffect(() => { const endDate = getFormattedDate(availableDates[0]); const startDate = getFormattedDate(availableDates[availableDates.length - 1]); const currentSelectedDate = getFormattedDate(currentDate);

if (+currentSelectedDate >= +endDate) {
  setDisableRightSwipe(true);
}
if (+currentSelectedDate <= +startDate) {
  setDisableLeftSwipe(true);
}

}, []);

const onSwipeCard = (defaultCardIndex) => { setSwipedCard(defaultCardIndex); };

const closeModal = () => { dispatch(openCurrentAffairsModal({ isOpenModal: false, content: [], })); };

const takeBookmark = () => { const isTamil = appLanguage === 'tn' ? 0 : 1; viewShotRef?.current.capture().then((uri) => { dispatch(addedCurrentAffairBookmark({ currentAffairsContent })); dispatch(setCurrentAffairsBookmark({ uri, currentAffairsCardData: currentAffairsContent, currentAffairs: translations.TEXT_DAILY_CURRENT_AFFAIRS, isTamil, })); }), (error) => { closeModal(); debugLog('Oops, snapshot failed', error); }; }; useEffect(() => { if (comeFromBookmarkButton) { setTimeout(() => { takeBookmark(); }, 1000); } dispatch(comeFromBookmark(false)); }, [openCurrentAffairModal]);

return (

{isData ? ( { return ; }} onSwiped={(defaultCardIndex) => onSwipeCard(defaultCardIndex)} onSwipedRight={swipeRight} onSwipedLeft={swipeLeft} /> ) : ( )} {openCurrentAffairModal && ( true}> {currentAffairsContent?.heading} {currentAffairsContent?.points?.map((item) => { return ( {item} ); })} )}

); }

CurrentAffairsSwiperCard.propTypes = { index: PropTypes.number, setDate: PropTypes.func, isParam: PropTypes.bool, initialId: PropTypes.any, };

export default CurrentAffairsSwiperCard;

[Mohitb1426]

"react": "17.0.2",
"react-native": "0.67.4",
"react-native-deck-swiper": "^2.0.12",