Philip Cesar Garay
97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
import React, { useRef } from "react";
|
|
import { View, Text, Image, Animated, PanResponder } from "react-native";
|
|
|
|
import { Fonts, Palette, Style } from "../styles";
|
|
import { icons } from "../assets";
|
|
|
|
const SlideToUnlock = ({ onUnlock, containerStyle = {} }) => {
|
|
const { width = 0 } = containerStyle;
|
|
const triggerPoint = width * 0.8; // Modification de la valeur du triggerPoint
|
|
|
|
const slideAnim = useRef(new Animated.Value(0)).current;
|
|
|
|
const panResponder = useRef(
|
|
PanResponder.create({
|
|
onStartShouldSetPanResponder: () => true,
|
|
onPanResponderMove: (e, gestureState) => {
|
|
if (gestureState.dx > 0 && gestureState.dx < triggerPoint) {
|
|
slideAnim.setValue(gestureState.dx);
|
|
}
|
|
},
|
|
onPanResponderRelease: (e, gestureState) => {
|
|
if (gestureState.dx > triggerPoint) {
|
|
// Modification de la condition
|
|
Animated.spring(slideAnim, {
|
|
toValue: 0,
|
|
useNativeDriver: false,
|
|
onComplete: () => onUnlock(),
|
|
}).start();
|
|
} else {
|
|
Animated.spring(slideAnim, {
|
|
toValue: 0,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
}
|
|
},
|
|
})
|
|
).current;
|
|
|
|
return (
|
|
<View style={{ ...styles.container, ...containerStyle }}>
|
|
<Text style={styles.text}>Slidez pour confirmer</Text>
|
|
<Animated.View
|
|
{...panResponder.panHandlers}
|
|
style={[
|
|
Style.containerCenter,
|
|
styles.slider,
|
|
{
|
|
transform: [{ translateX: slideAnim }],
|
|
},
|
|
]}
|
|
>
|
|
<Image
|
|
source={icons.arrowRight}
|
|
style={[
|
|
Style.iconDefault,
|
|
{ tintColor: Palette.darkRadioactivGreen },
|
|
]}
|
|
/>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = {
|
|
container: {
|
|
height: 50,
|
|
backgroundColor: Palette.transparentRadioactivGreen,
|
|
borderRadius: 50,
|
|
borderWidth: 2,
|
|
borderStyle: "solid",
|
|
borderColor: Palette.radioactivGreen,
|
|
overflow: "hidden",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
slider: {
|
|
position: "absolute",
|
|
left: 3,
|
|
top: 3,
|
|
width: 40,
|
|
height: 40,
|
|
backgroundColor: Palette.radioactivGreen,
|
|
borderRadius: 25,
|
|
},
|
|
text: {
|
|
position: "absolute",
|
|
...Fonts({
|
|
color: "white",
|
|
style: {
|
|
fontWeight: "bold",
|
|
},
|
|
}),
|
|
},
|
|
};
|
|
|
|
export default SlideToUnlock;
|