import React, { useState, useRef } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
export default function SwipeableBox() {
const [boxColor, setBoxColor] = useState('gray');
const animatedColor = useRef(new Animated.Value(0)).current; // 0=gray, 1=green, -1=red
const colorInterpolation = animatedColor.interpolate({
inputRange: [-1, 0, 1],
outputRange: ['red', 'gray', 'green']
});
const swipeGesture = Gesture.Pan()
.onEnd(event => {
if (event.translationX > 50) {
setBoxColor('green');
Animated.timing(animatedColor, {
toValue: 1,
duration: 300,
useNativeDriver: false
}).start();
} else if (event.translationX < -50) {
setBoxColor('red');
Animated.timing(animatedColor, {
toValue: -1,
duration: 300,
useNativeDriver: false
}).start();
} else {
setBoxColor('gray');
Animated.timing(animatedColor, {
toValue: 0,
duration: 300,
useNativeDriver: false
}).start();
}
});
return (
<View style={styles.container}>
<Text style={styles.instructions}>Swipe the box left or right</Text>
<GestureDetector gesture={swipeGesture}>
<Animated.View style={[styles.box, { backgroundColor: colorInterpolation }]} />
</GestureDetector>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
instructions: {
fontSize: 18,
marginBottom: 20
},
box: {
width: 150,
height: 150,
borderRadius: 10
}
});This solution uses react-native-gesture-handler to detect horizontal swipe gestures on the box. We create a Pan gesture that listens for the end of the swipe. If the user swipes right more than 50 pixels, the box color changes to green. If swiped left more than 50 pixels, it changes to red. Otherwise, it resets to gray.
We use React Native's Animated.Value to smoothly interpolate the background color between red, gray, and green. The Animated.timing function animates the color change over 300 milliseconds.
The box is wrapped inside a GestureDetector component that applies the gesture to it. This setup ensures the box responds visually and interactively to user swipes.
