Swiping at the side of cards not working

[ghost]

Anyone knows why the following is happening (code is below) on iPhone (8)? The same action on Android works fine!

https://user-images.githubusercontent.com/14151318/136805468-f5baabd8-0e3a-45ad-9ff9-c07737fd7d0e.mp4

Code:

import React, {useRef, useState} from "react";
import {ImageBackground, StyleSheet} from "react-native";
import CustomView from "../components/custom_view/CustomView";
import Swiper from 'react-native-deck-swiper';
import data from "../assets/data/demo";
import {useTheme} from "react-native-paper";
import {DataT} from "../types";

const ScreenRootSwipe = () => {
    const theme = useTheme();

    const [swipeDirection, setSwipeDirection] = useState('')
    const [cardIndex, setCardIndex] = useState<number>(0)

    return (
        <CustomView
            style={styles.container}
        >
            <Swiper
                cards={data}
                renderCard={(card) => {
                    return (
                        <CustomView style={styles.card}>
                            <ImageBackground
                                source={card.image}
                                resizeMode="cover"
                                style={styles.imageBackgroundContainer}
                                imageStyle={styles.imageBackground}
                            >

                            </ImageBackground>
                        </CustomView>
                    )
                }}
                stackAnimationFriction={0}
                onSwiped={(cardIndex) => {console.log(cardIndex)}}
                onSwipedAll={() => console.log('Swiped all')}
                backgroundColor={theme.colors.background}
                cardIndex={0}
                stackSize={2}
                stackSeparation={1}
                marginTop={0}
                marginBottom={0}
                cardStyle={{
                    top: 10,
                    left: 10,
                    bottom: 10,
                    right: 10,
                    width: 'auto',
                    height: 'auto'
                }}
                // verticalSwipe={false}
                onTapCard={() => console.log('onTap')}
                overlayLabels={{
                    left: {
                        title: 'NO',
                        style: {
                            label: {
                                borderColor: theme.colors.error,
                                color: theme.colors.error,
                                borderWidth: 2
                            },
                            wrapper: {
                                flexDirection: 'column',
                                alignItems: 'flex-end',
                                justifyContent: 'flex-start',
                                marginTop: 30,
                                marginLeft: -30,
                                textAlign: 'center'
                            }
                        }
                    },
                    right: {
                        title: 'YES',
                        style: {
                            label: {
                                borderColor: theme.colors.success,
                                color: theme.colors.success,
                                borderWidth: 2,
                            },
                            wrapper: {
                                flexDirection: 'column',
                                alignItems: 'flex-start',
                                justifyContent: 'flex-start',
                                marginTop: 30,
                                marginLeft: 30
                            }
                        }
                    },
                }}
            />
        </CustomView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    statsWrapper: {

    },
    imageBackgroundContainer: {
        flex: 1,
        justifyContent: "center",
    },
    imageBackground: {
        borderRadius: 6
    },
    card: {
        flex: 1,
    },
    text: {
        justifyContent: 'flex-end',
        fontSize: 20,
        backgroundColor: "transparent"
    }
});

export default ScreenRootSwipe

[blizzupdev]

same issue here. Any solution?