swipeBack cardIndex delay

[Kekaradag]

First, thank you for this great API.

I am new to react native and Javascript. And I have a problem about cardIndex delay when i called swipeBack method. For example, when i called swipeBack, my onSwiped props works and cardIndex increments by 1 instead of decrementing. After that, when i called swipeBack again it work properly. So, when i used swipeBack, first cardIndex increments then decrements. Thus, the order and cardIndex number becomes problematic.

Here is my code:

import React from 'react';
import { Text, View, Dimensions, TouchableOpacity } from 'react-native';
import Swiper from 'react-native-deck-swiper';
import SlidingCard from './SlidingCard';

const { width, height } = Dimensions.get('window');

class Carousel extends React.Component {

    state = { lastState: true, difference: 0 } 

    updateIndex(cardIndex) {
        this.props.updateIndex(cardIndex);
        console.log(cardIndex);
    }

        render() {
            return (

                <View style={styles.container}>
                    <Swiper
                        ref={swiper => {
                            this.swiper = swiper;
                        }}
                        cards={[
                        <SlidingCard name="Kenan" userName='kekaradag' icon={require('../img/icon/boy.png')} />, 
                        <SlidingCard name="Abdul" userName='akaradag' icon={require('../img/icon/boy.png')} />,
                        <SlidingCard name="Yuksel" userName='yukaradag' icon={require('../img/icon/man.png')} />,
                        <SlidingCard name="Selda" userName='sekaradag' icon={require('../img/icon/girl.png')} />               
                        ]}
                        renderCard={(card) => { 
                            return (

                                <View >
                                    {card}
                                </View>
                            );
                        }
                    }
                        onSwiped={(cardIndex) => { this.updateIndex(cardIndex); }}
                        onSwipedAll={() => { console.log('onSwipedAll'); }}
                        cardIndex={0}
                        backgroundColor={'#03aa32'}
                        stackSize={3}
                        useViewOverflow={false}
                        stackSeparation={0}
                        stackScale={0}
                        showSecondCard={false}
                        cardVerticalMargin={height * 0.015}
                        cardHorizontalMargin={width * 0.02}
                        containerStyle={{ justifyContent: 'center', alignItems: 'center' }}
                    >
                        <TouchableOpacity
                            style={styles.buttonStyle}
                            onPress={() => { 
                                this.swiper.swipeBack(this.swiper.previousCardIndex); 
                            }}
                        >
                            <Text>Back</Text>
                        </TouchableOpacity>
                    </Swiper>
                </View>
            );
        }
    }
    const styles = {
        container: {
                width: width * 1, 
                height: height * 0.28,
        },
};

export default Carousel; 

And in an other page, I take the cardNumber and render some info about that card.

[webraptor]

The swipeBack method receives as argument a callback function, which in turn is passed the decremented card index when called. In the code you posted, you're passing this.swiper.previousCardIndex as a parameter to the swipeBack function which is definitely not a callback. [this.swiper.swipeBack(this.swiper.previousCardIndex)]

Should be something like:

this.swiper.swipeBack(( newCardIndex ) => {
  console.log(`this is the newly decremented card index ${newCardIndex}`);
})