Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bruteforks opened this issue Mar 16, 2023 · 1 comment

Comments

@bruteforks
Copy link

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
Copy link

edwardASavage commented May 6, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants