Swiping at the side of cards not working
Warqus opened this issue · comments
Anyone knows why the following is happening (code is below) on iPhone (8)? The same action on Android works fine!
135623586-2f540512-ae6a-45dc-99bf-3421ffee836e.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