import { useEffect, useRef } from 'react';
import { Animated, Easing, View } from 'react-native';
/**
* Animierter Pulse-Marker für Screenshot-Overlays im Onboarding-Pre-Explainer.
*
* Positioniert via Prozent-Koordinaten relativ zum Container — so unabhängig
* von Screen-Größe + iPad-Skalierung. Pulsiert (Outer-Ring) + arrow pointer
* darunter zeigt klar wo der User tappen muss.
*
*
*
*
*
*
* `xPercent=50, yPercent=87` ist die typische Position für "Erlauben"/
* "Fortfahren" am Bottom des iOS-Permission-Dialogs.
*/
export function ScreenshotPointer({
xPercent,
yPercent,
color = '#dc2626',
}: {
/** Horizontale Position als 0..100 vom Container-Width */
xPercent: number;
/** Vertikale Position als 0..100 vom Container-Height */
yPercent: number;
/** Pulse-Color. Default rot — fällt auf, signalisiert "wichtig". */
color?: string;
}) {
const pulse = useRef(new Animated.Value(0)).current;
useEffect(() => {
const loop = Animated.loop(
Animated.sequence([
Animated.timing(pulse, {
toValue: 1,
duration: 1100,
useNativeDriver: true,
easing: Easing.out(Easing.cubic),
}),
Animated.timing(pulse, {
toValue: 0,
duration: 1100,
useNativeDriver: true,
easing: Easing.in(Easing.cubic),
}),
]),
);
loop.start();
return () => loop.stop();
}, [pulse]);
const scale = pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.45] });
const opacity = pulse.interpolate({ inputRange: [0, 1], outputRange: [0.95, 0.2] });
return (
{/* Outer pulse-ring */}
{/* Inner solid ring */}
);
}