swipeBack

[cnlkkrb]

When I swipeBack, it brings back the last card I swiped, but the previous card disappears for 0.5 seconds and comes back. Is there a solution to this? I think the swipeBack command is working incorrectly. Can you solve this?

const backButton = () => {
const newIndex = (currentIndex - 1 + cards.length) % cards.length;
setCurrentIndex(newIndex);
dotAnimation.setValue(newIndex);
swiperRef.current?.swipeBack();
//swiperRef.current?.jumpToCardIndex(newIndex);
};

return (
<SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
<Swiper
ref={swiperRef}
cards={cards}
containerStyle={styles.swiperContainer}
renderCard={(card) => {
return (

);
}}
onSwipedRight={(cardIndex) => {
setCurrentIndex(cardIndex + 1);
dotAnimation.setValue(cardIndex);
if (cardIndex == cards.length - 1) {
nextCard()
}
}}
onSwipedLeft={(cardIndex) => {
setCurrentIndex(cardIndex + 1);
dotAnimation.setValue(cardIndex + 1);
if (cardIndex === cards.length - 1) {
nextCard();
}
}}
cardStyle={{
width: '90%',
height: '100%',
flex: 1
}}
cardIndex={currentIndex}
stackSize={4}
overlayLabels={OverlayLabels}
animateOverlayLabelsOpacity={true}
disableBottomSwipe={true}
disableTopSwipe={true}
infinite={false}
verticalSwipe={false}
stackScale={0}
secondCardZoom={0}
stackSeparation={0}
marginTop={0}
swipeBackCard={true}
>

[yogesh-gloify]

Same happens with me. I implement news swiping feature using react-native-deck-swiper. And I'm calling swipeBack() function inside onSwipedBottom prop like this -> onSwipedBottom={() => swiperRef.current.swipeBack()} But it didn't work properly.

By the way it is working properly in Button. I have Implemented the same using button as mentioned in docs, like this -->

<Button
onPress={() => swiperRef.current.swipeBack()}
title="Swipe Back"
/>

It swipes back when i click on the button inside the Swiper Here is my Swiper Code:

<View style={[styles.container, {backgroundColor: colors.background}]}>
{articles ? (
<Swiper
ref={swiperRef}
cards={articles}
cardIndex={0}
renderCard={(article, index) => {
return (

);
}}
containerStyle={{backgroundColor: colors.background}}
backgroundColor={colors.background}
verticalSwipe={true}
horizontalSwipe={false}
stackSize={3}
stackSeparation={20}
stackScale={4}
infinite={true}
cardVerticalMargin={20}
showSecondCard={true}
animateCardOpacity={true}
swipeBackCard={true}
onSwipedBottom={() => swiperRef.current.swipeBack()}>
<Button
onPress={() => swiperRef.current.swipeBack()}
title="Swipe Back"
/>

) : (

)}

When I swipeBack, it brings back the last card I swiped, but the previous card disappears for 0.5 seconds and comes back. Is there a solution to this? I think the swipeBack command is working incorrectly. Can you solve this? By @cnlkkrb

Can Anyone here in the community help me solve this issue????

[yogesh-gloify]

Or Is there any other way to programatically sovle the swipeBack issue using smooth transition with showSecondCard={true} ???