How to handle fast swiping ?
roshan-p opened this issue · comments
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.
You can try to use some kind of throttling/debouncing
I'm facing the same issue mentioned here
on my end, i actually fix by this way, you can try it out
#93 (comment)
on my end, i actually fix by this way, you can try it out #93 (comment)
@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
@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
@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 ? (
<Swiper
cards={currentAffairsData[index].data}
infinite
ref={ref}
swipeBackCard
horizontalSwipe
disableTopSwipe={cardDataLength === 1}
disableBottomSwipe={cardDataLength === 1}
disableLeftSwipe={disableLeftSwipe}
disableRightSwipe={disableRightSwipe}
cardHorizontalMargin={5}
cardVerticalMargin={5}
goBackToPreviousCardOnSwipeBottom
stackSize={cardStackSize}
stackSeparation={15}
renderCard={(card) => {
return ;
}}
onSwiped={(defaultCardIndex) => onSwipeCard(defaultCardIndex)}
onSwipedRight={swipeRight}
onSwipedLeft={swipeLeft}
/>
) : (
<EmptyListComponent emptyListText={noInternet ? translations.OFFLINE : ''} />
)}
{openCurrentAffairModal && (
<CustomModal
borderTopLeftRadius={20}
borderTopRightRadius={20}
borderBottomRightRadius={20}
borderBottomLeftRadius={20}
visible={openCurrentAffairModal}
modalHeight={screenHeightDefault * 0.87}
alignBottom={false}
onBackdropPress={closeModal}
backdropOpacity={0.7}
>
<View style={Styles.mainContainer} onStartShouldSetResponder={() => true}>
<SvgIcon.CloseArrow color={appTheme.TEXT_COLOR_HEADING} />
<Image
style={Styles.topImageStyle}
source={{ uri: imageUrl }}
/>
{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;
"react": "17.0.2",
"react-native": "0.67.4",
"react-native-deck-swiper": "^2.0.12",