Get stuck when quick swiper

Please take a look

here my code.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  FlatList
} from 'react-native';

import CardStack, { Card } from 'react-native-card-stack-swiper';

const data = []
for (var i = 0; i < 10; i++) {
  data.push({ key: i + 1 })
}

export default class App extends Component<{}> {
  constructor(props){
    super(props);
    this.state = { dataCard: data };
}

  renderItem(item) {
    return (
      <CardStack
        style={styles.content}
        renderNoMoreCards={() => <Text style={{ fontWeight: '700', fontSize: 18, color: 'gray' }}>No more cards :(</Text>}
        ref={swiper => { this.swiper = swiper }}
        onSwiped={() => console.log('onSwiped')}
        onSwipedLeft={() => console.log('onSwipedLeft')}
      >
        <Card style={[styles.card, styles.card1]}>
          <Text style={styles.label}>{item.key} a</Text>
        </Card>
      </CardStack>
    )
  }

  render() {

    return (
      <View style={{ flex: 1 }}>

        <FlatList
          data={this.state.dataCard}
          // data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({ item }) => this.renderItem(item)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#f2f2f2',
  },
  content: {
    flex: 1,
    // alignItems: 'center',
    // justifyContent: 'center',
    height: 500,
    // width: 200,
    borderWidth: 1,
    borderColor: 'green'
  },
  card: {
    width: 320,
    height: 470,
    // backgroundColor: '#FE474C',
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 0.5,
    borderWidth: 1
  },
  card1: {
    // backgroundColor: '#FE474C',
  },
  card2: {
    backgroundColor: '#FEB12C',
  },
  label: {
    lineHeight: 400,
    textAlign: 'center',
    fontSize: 55,
    fontFamily: 'System',
    // color: '#ffffff',
    backgroundColor: 'transparent',
  },
  footer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonContainer: {
    width: 220,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  button: {
    shadowColor: 'rgba(0,0,0,0.3)',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 0.5,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 0,
  },
  orange: {
    width: 55,
    height: 55,
    borderWidth: 6,
    borderColor: 'rgb(246,190,66)',
    borderWidth: 4,
    borderRadius: 55,
    marginTop: -15
  },
  green: {
    width: 75,
    height: 75,
    backgroundColor: '#fff',
    borderRadius: 75,
    borderWidth: 6,
    borderColor: '#01df8a',
  },
  red: {
    width: 75,
    height: 75,
    backgroundColor: '#fff',
    borderRadius: 75,
    borderWidth: 6,
    borderColor: '#fd267d',
  }
});

[matias91]

I believe that the problem is in the onPanResponderTerminate. Leaving it empty is causing the issue on Android. Based on what I found and tested, onPanResponderTerminate should have the same function than onPanResponderRelease, in order to reset the card position. I’ll try to create a PR, but I hope at least the comment can help others.

[mitesh-db]

I was facing same issue, I have <ScrollView> as main component inside <Card>, Setting zIndex to <CardStack> helped me,

Here is my code

<CardStack
           style={{
                       height: Dimensions.get('window').height,
                       width: Dimensions.get('window').width,
                       alignItems: 'center',
                       zIndex: 99,
                       justifyContent: 'center',
           }}