import React, { useState } from 'react';
import { View, Animated, StyleSheet } from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
const SlideButton = () => {
const [slideCompleted, setSlideCompleted] = useState(false);
const translateX = new Animated.Value(0);
const handleSlide = Animated.event([{ nativeEvent: { translationX: translateX } }], {
useNativeDriver: true,
listener: (event) => {
if (event.nativeEvent.translationX > 150) {
setSlideCompleted(true);
}
}
});
const handleRelease = (event) => {
if (event.nativeEvent.translationX < 150) {
Animated.spring(translateX, {
toValue: 0,
useNativeDriver: true
}).start();
} else {
Animated.spring(translateX, {
toValue: 200,
useNativeDriver: true
}).start();
}
};
return (
<View style={styles.container}>
<PanGestureHandler
onGestureEvent={handleSlide}
onHandlerStateChange={(event) => {
if (event.nativeEvent.state === State.END) {
handleRelease(event);
}
}}
>
<Animated.View style={[styles.button, { transform: [{ translateX }] }]} />
</PanGestureHandler>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
button: {
width: 200,
height: 50,
backgroundColor: 'blue'
}
});
export default SlideButton;