[iOS] Swiping and Tapping Quickly Causes Unintended Swipe of Next Card

[PlamenPanayotov]

Bug Report: Card Swiping Issue on iOS

Issue Description:

On iOS, when swiping a card and quickly tapping the next card before the previous one is fully swiped away, the next card is unintentionally swiped. This seems to occur when interacting with the next card before the swiped card has completely left the screen.

Steps to Reproduce:

1. Swipe a card.
2. Before the swiped card is fully gone, quickly tap the next card.
3. Observe that the next card is unintentionally swiped.

Expected Behavior:

• The next card should not be swiped when tapped immediately after the previous card is swiped.

Actual Behavior:

• The next card gets swiped when tapped, even though a swipe gesture wasn't initiated.

Affected Platforms:

• iOS

Environment:

• react-native-deck-swiper version: ^2.0.17
• Expo version: ~51.0.28
• React Native version: 0.74.5
• React version: 18.2.0
• Device tested on: iPhone 15 (Simulator), iOS 17.4

Code Example:

import { StyleSheet, View, Button, Text } from 'react-native';
import Swiper from 'react-native-deck-swiper';
import React from 'react';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Swiper
        cards={['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY']}
        renderCard={(card) => {
          return (
            <View style={styles.card}>
              <Text style={styles.text}>{card}</Text>
            </View>
          );
        }}
        onSwiped={(cardIndex) => console.log(cardIndex)}
        onSwipedAll={() => console.log('onSwipedAll')}
        cardIndex={0}
        backgroundColor={'#4FD0E9'}
        infinite={true}
        stackSize={3}
      >
        <Button
          onPress={() => console.log('oulala')}
          title="Press me"
        />
      </Swiper>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  card: {
    flex: 1,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: '#E8E8E8',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  text: {
    textAlign: 'center',
    fontSize: 50,
    backgroundColor: 'transparent',
  },
});

package.json

{
  "name": "test-swiper",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/native": "^6.0.2",
    "expo": "~51.0.28",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.9",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.23",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-deck-swiper": "^2.0.17",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}