Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 6x 6x 6x 3x 3x 6x 6x 1x | import React from "react";
import { Pressable, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import Animated, {
Easing,
useAnimatedStyle,
useSharedValue,
withTiming,
} from "react-native-reanimated";
const BURGUNDY = "#800020";
interface SwapButtonProps {
readonly onPress: () => void;
}
export default function SwapButton({ onPress }: SwapButtonProps) {
const rotation = useSharedValue(0);
const animStyle = useAnimatedStyle(() => ({
transform: [{ rotate: `${rotation.value}deg` }],
}));
const handlePress = () => {
rotation.value = withTiming(rotation.value + 180, {
duration: 280,
easing: Easing.inOut(Easing.ease),
});
onPress();
};
return (
<Pressable
onPress={handlePress}
hitSlop={8}
style={({ pressed }) => [styles.btn, pressed && styles.btnPressed]}
>
<Animated.View style={animStyle}>
<Ionicons name="swap-vertical" size={16} color={BURGUNDY} />
</Animated.View>
</Pressable>
);
}
const styles = StyleSheet.create({
btn: {
width: 28,
height: 28,
borderRadius: 14,
backgroundColor: "rgba(128,0,32,0.10)",
alignItems: "center",
justifyContent: "center",
},
btnPressed: {
backgroundColor: "rgba(128,0,32,0.20)",
},
});
|