manuthecoder-react-native-spotlight-tour
Version:
React Native library to implement a highly customizable app tour feature with an awesome spotlight effect
32 lines • 1.55 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { cloneElement, useCallback, useContext, useEffect, useRef, } from "react";
import { View } from "react-native";
import { SpotlightTourContext } from "../../SpotlightTour.context";
/**
* React functional component used to attach and step to another component by
* only wrapping it. Use its props to customize the behavior.
*
* @param props the component props
* @returns an AttachStep React element
*/
export function AttachStep({ children, fill = false, index, style }) {
const { changeSpot, current } = useContext(SpotlightTourContext);
const ref = useRef(null);
const updateSpot = useCallback(() => {
const indexes = typeof index === "number" ? [index] : index;
if (current !== undefined && indexes.includes(current)) {
ref.current?.measureInWindow((x, y, width, height) => {
changeSpot({ height, width, x, y });
});
}
}, [changeSpot, current, JSON.stringify(index)]);
const onLayout = useCallback((event) => {
updateSpot();
children.props.onLayout?.(event);
}, [updateSpot, children.props.onLayout]);
useEffect(() => {
updateSpot();
}, [updateSpot]);
return (_jsx(View, { testID: "attach-wrapper-view", ref: ref, style: [{ alignSelf: fill ? "stretch" : "flex-start" }, style], collapsable: false, focusable: false, onLayout: onLayout, children: cloneElement(children, children.props, children.props.children) }));
}
//# sourceMappingURL=AttachStep.component.js.map