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}
  >

[Gloifyogesh]

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 ( <NewsCard key={index} author={article?.author} title={article?.title} cardImg={article?.urlToImage} source={article?.source?.name} desc={article?.description} time={moment(article?.publishedAt).fromNow()} navigation={navigation} /> ); }} 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" /> ) : (

  )}
</View>

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????

[Gloifyogesh]

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