From b41b5647aa10d22ca83cfd3ba97146681e9f28a3 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Mon, 9 Feb 2026 00:25:45 +0000 Subject: feat(mobile): Add animated UI feedback to sharing modal (#2427) * feat(mobile): Add animated UI feedback to sharing modal --------- Co-authored-by: Claude --- apps/mobile/components/sharing/ErrorAnimation.tsx | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 apps/mobile/components/sharing/ErrorAnimation.tsx (limited to 'apps/mobile/components/sharing/ErrorAnimation.tsx') diff --git a/apps/mobile/components/sharing/ErrorAnimation.tsx b/apps/mobile/components/sharing/ErrorAnimation.tsx new file mode 100644 index 00000000..c5cc743a --- /dev/null +++ b/apps/mobile/components/sharing/ErrorAnimation.tsx @@ -0,0 +1,41 @@ +import { useEffect } from "react"; +import { View } from "react-native"; +import Animated, { + useAnimatedStyle, + useSharedValue, + withSequence, + withSpring, + withTiming, +} from "react-native-reanimated"; +import * as Haptics from "expo-haptics"; +import { AlertCircle } from "lucide-react-native"; + +export default function ErrorAnimation() { + const scale = useSharedValue(0); + const shake = useSharedValue(0); + + useEffect(() => { + Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error); + + scale.value = withSpring(1, { damping: 12, stiffness: 200 }); + shake.value = withSequence( + withTiming(-10, { duration: 50 }), + withTiming(10, { duration: 100 }), + withTiming(-10, { duration: 100 }), + withTiming(10, { duration: 100 }), + withTiming(0, { duration: 50 }), + ); + }, []); + + const style = useAnimatedStyle(() => ({ + transform: [{ scale: scale.value }, { translateX: shake.value }], + })); + + return ( + + + + + + ); +} -- cgit v1.2.3-70-g09d2