manuthecoder-react-native-spotlight-tour
Version:
React Native library to implement a highly customizable app tour feature with an awesome spotlight effect
46 lines • 1.95 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useEffect, useMemo, useRef } from "react";
import isEqual from "react-fast-compare";
import { Animated } from "react-native";
import { Circle } from "react-native-svg";
import { transitionOf } from "../../../../helpers/shape";
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
export const CircleShape = memo(props => {
const { motion, padding, setReference, spot, useNativeDriver } = props;
const r = useMemo(() => {
return Math.max(spot.width, spot.height) / 2 + padding;
}, [spot.width, spot.height, padding]);
const x = useMemo(() => {
return spot.x + spot.width / 2;
}, [spot.x, spot.width]);
const y = useMemo(() => {
return spot.y + spot.height / 2;
}, [spot.y, spot.height]);
const center = useRef(new Animated.ValueXY({ x, y }, { useNativeDriver }));
const radius = useRef(new Animated.Value(r, { useNativeDriver }));
const opacity = useRef(new Animated.Value(0, { useNativeDriver }));
useEffect(() => {
const transition = transitionOf({
motion,
nextOrigin: { x, y },
nextSize: r,
opacity,
origin: center,
size: radius,
useNativeDriver,
});
transition.start();
setReference({
measure: callback => {
const r2 = r * 2;
callback(x - r, y - r, r2, r2);
},
});
return () => setReference(undefined);
}, [r, x, y, setReference, motion, useNativeDriver]);
if ([spot.height, spot.width].every(value => value <= 0)) {
return null;
}
return (_jsx(_Fragment, { children: _jsx(AnimatedCircle, { r: radius.current, cx: center.current.x, cy: center.current.y, opacity: opacity.current, fill: "black" }) }));
}, isEqual);
//# sourceMappingURL=CircleShape.component.js.map