webraptor / react-native-deck-swiper

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

How can you swipe backwards and see the previous card in the stack during the animation? #99

Open bruteforks opened 1 year ago

bruteforks commented 1 year ago

So I'm trying to swipe backwards and want to see the previous card during the swipe animation, but instead it shows card 4, then after the animation finishes it shows the correct card. I think there are similar issues but no one's posted enough information about it. Let me know if you have any ideas. Thanks

Kooha-2023-03-16-00-15-46

import React from 'react';
import Swiper from 'react-native-deck-swiper';
import {StyleSheet, Text, View} from 'react-native';

const cards = [
  {id: 0, text: 'Card 1'},
  {id: 1, text: 'Card 2'},
  {id: 2, text: 'Card 3'},
  {id: 3, text: 'Card 4'},
  {id: 4, text: 'Card 5'},
  {id: 5, text: 'Card 6'},
];

export default function Swipe() {
  return (
    <View style={styles.container}>
      <Swiper
        goBackToPreviousCardOnSwipeRight={true}
        animateCardOpacity={false}
        cards={cards}
        showSecondCard={true}
        backgroundColor="#FFEEEE"
        stackSize={2}
        cardVerticalMargin={0}
        cardHorizontalMargin={0}
        infinite={true}
        verticalSwipe={false}
        // swipeBackCard={false}
        renderCard={card => {
          return (
            <View style={styles.card}>
              <Text style={styles.text}>{card.text}</Text>
            </View>
          );
        }}
      />
    </View>
  );
}
edwardASavage commented 1 year ago

Having a related issue with rendering - SwipeRight renders correctly, then replaces with the next index. Only happens when parsing through index to my handle function (using redux :

<SafeAreaView style={styles.container}>
      <Swiper
        cards={CardData}
        renderCard={Card}
        infinite // repeat prop
        backgroundColor="white"
        cardHorizontalMargin={0}
        stackSize={2} // bg cards
        onSwipedRight={(index) => handleSwipeRight(index)}
      />
    </SafeAreaView>
 const handleSwipeRight = (index: number) => {
    // if exists as data, and if not already added.
    if (props.items.possible?.[index]) {
      props.addItem(index);
    }
  }