onSwiped deffers onSwipedLeft/onSwipedRight

[MindFreeze]

When I define callbacks for onSwiped, onSwipedLeft and onSwipedRight, onSwiped is called properly but the onSwipedLeft/onSwipedRight are not called until the next swipe. So if you swipe left you get onSwiped, then if you wipe right, you get onSwipedLeft, onSwiped. If onSwiped is not defined, onSwipedLeft/onSwipedRight work properly (right away). I get this behaviour using the example code and just adding onSwipedLeft/onSwipedRight callbacks.

[webraptor]

I cannot replicate this on latest 1.5.22. Tried the following App.js code:

onSwiped = (type) => {
    console.log(`on swiped ${type}`);
  }

  render() {
    return (
      <View style={styles.container}>
        <Swiper
          ref={swiper => {
            this.swiper = swiper
          }}
          onSwiped={() => this.onSwiped('general')}
          onSwipedLeft={() => this.onSwiped('left')}
          onSwipedRight={() => this.onSwiped('right')}
          onSwipedTop={() => this.onSwiped('top')}
          onSwipedBottom={() => this.onSwiped('bottom')}
        </Swiper>
      </View>
    )
  }

and got the following console output, instantly after each swipe:

App.js:55 on swiped general
App.js:55 on swiped left
App.js:55 on swiped general
App.js:55 on swiped right
App.js:55 on swiped general
App.js:55 on swiped top
App.js:55 on swiped general
App.js:55 on swiped bottom

Please share your code or close the issue if it is resolved.

[MindFreeze]

I have the same version and I get this odd behavior. Even onSwipedAll doesn't get called properly. This is my code:

import React from 'react';
import {
    Image,
    // Platform,
    // ScrollView,
    StyleSheet,
    TouchableWithoutFeedback,
    // Text,
    View,
    Button,
} from 'react-native';
import Swiper from 'react-native-deck-swiper';

const images = [
    require('../assets/images/card/1.jpg'),
    require('../assets/images/card/2.jpg'),
    require('../assets/images/card/3.jpg'),
    require('../assets/images/card/4.jpg'),
    require('../assets/images/card/5.jpg'),
    require('../assets/images/card/6.jpg'),
    require('../assets/images/card/7.jpg'),
    require('../assets/images/card/8.jpg'),
    require('../assets/images/card/9.jpg'),
    require('../assets/images/card/10.jpg'),
    require('../assets/images/card/11.jpg'),
];
const randomImages = Array(...{length: images.length})
    .map(Number.call, Number)
    .sort(() => .5 - Math.random());

export default class PocScreen extends React.Component {
    static navigationOptions = {
        header: null,
    };

    render() {
        return (
            <View style={styles.container}>
                <Swiper
                    cards={randomImages}
                    renderCard={(card) => {
                        return (
                            <View style={styles.card}>
                                <Image
                                    source={images[card]}
                                    style={styles.photo}
                                />
                                <TouchableWithoutFeedback onPress={() => {
                                    console.log('tap');
                                }}>
                                    <View style={styles.bottomTappable}></View>
                                </TouchableWithoutFeedback>
                            </View>
                        );
                    }}
                    // fucks up onSwipedLeft/onSwipedRight
                    onSwiped={() => {
                        console.log('general');
                    }}
                    onSwipedAll={() => {
                        console.log('onSwipedAll');
                    }}
                    onSwipedLeft={() => {
                        console.log('Left');
                    }}
                    onSwipedRight={() => {
                        console.log('Right');
                    }}
                    cardIndex={0}
                    disableBottomSwipe={true}
                    backgroundColor={'#4FD0E9'}
                    stackSize= {3}>
                    <Button
                        onPress={() => {
                            console.log('oulala');
                        }}
                        title="Press me">
                        You can press me
                    </Button>
                </Swiper>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    card: {
        flex: 1,
        borderRadius: 4,
        borderWidth: 2,
        borderColor: '#E8E8E8',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    photo: {
        flex: 1,
        resizeMode: 'cover',
        maxWidth: '100%',
    },
    bottomTappable: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        height: 150,
        borderTopWidth: StyleSheet.hairlineWidth,
        borderColor: 'white',
    },
});

[webraptor]

Ran your code within the Example app. All good. There must be something else that's not integrating well with the Swiper on your end and that's triggering some performance issues.

[AGTheodorides]

I had issues with the onSwipedAll() callback, too. The reason is that state.cards gets initialized with props.cards at the constructor but is not updated later if the cards prop gets updated. The allSwipedCheck() function fails because the state.cards.length is zero and never gets to equal newCardIndex. I personally resolved this by using componentDidUpdate() and modifying incrementCardIndex() slightly. I'm kind of a clutch with github, sorry if I'm not conveying info with the proper etiquette - just giving my two cents.