webraptor / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
137 stars 84 forks source link

React native deck swiper swiping two cards at a time #49

Open mirza-osv opened 3 years ago

mirza-osv commented 3 years ago

I'm using react-native-deck-swiper (latest version). What I noticed that with every swipe, two cards are swiping despite only one item getting removed from the array. Can anyone tell me why this issue happening? Below is the ParentComponent and ChildComponent I've added:

Parent Component:

function ParentComponent() {
    const [Items, setItems] = useState([
        {
            id: 454,
            name: 'John Smith',
        },
        {
            id: 564,
            name: 'Alex Clarke',
        },
        {
            id: 432,
            name: 'Mathew Hayden',
        },
      {
        id: 4122,
        name: 'Dan Barker',
    },
    {
        id: 4320,
        name: 'Colin Barker',
    },
    ]);

    const handleClick = (index) => {
        Items.splice(index, 1);        
        setItems(Items);
    };
    return <ChildComponent Items={Items} handleClick={handleClick} />;
}

Child Component:

export default function ChildComponent({ Items, handleClick }) {
    const renderCard = card => {
        return (
            <View
                style={{
                    backgroundColor: '#FFF',
                    borderRadius: 5,
                    height: 250,
                    padding: 50,
                    marginLeft: 25,
                    marginRight: 25,
                    borderWidth: 1,
                    borderColor: '#CCC',
                }}
            >
                <Text>{card.name}</Text>
            </View>
        );
    };

    return (
        <Swiper
            useViewOverflow={Platform.OS === 'ios'}
            cards={Items}
            onSwipedLeft={cardIndex => handleClick(cardIndex)}
            onSwipedRight={cardIndex => handleClick(cardIndex)}
            verticalSwipe={false}
            showSecondCard={true}
            stackSize={Items.length}
            stackSeparation={-22}
            animateCardOpacity={true}
            backgroundColor={'white'}
            containerStyle={styles.swiper}
            renderCard={card => {
                return renderCard(card);
            }}
        />
    );
}

Video Link https://i.stack.imgur.com/v5S00.gif

samina-tl commented 1 year ago

Me also facing same issue while using react-native-deck-swiper => "2.0.9",

bruteforks commented 1 year ago

I think your handleClick/splice is causing this behavior