manuthecoder-react-native-spotlight-tour
Version:
React Native library to implement a highly customizable app tour feature with an awesome spotlight effect
29 lines • 1.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { Css } from "./TourBox.styles";
/**
* A built-in TourBox component which can be used as a tooltip container for
* each step. While it's highly customizable, it's not required and can be
* replaced by your own component.
*
* @param props the component props
* @returns A TourBox React element
*/
export function TourBox(props) {
const { backStyle, backText = "Back", children, hideBack, hideNext, isFirst, isLast, next, nextStyle, nextText = "Next", onBack, onNext, onPause, pause, pauseStyle, pauseText = "Pause", previous, showPause, stop, style, title, titleStyle, } = props;
const handleBack = useCallback(() => {
isFirst ? stop() : previous();
onBack?.();
}, [isFirst, stop, previous, onBack]);
const handleNext = useCallback(() => {
isLast ? stop() : next();
onNext?.();
}, [isLast, stop, next, onNext]);
const handlePause = useCallback(() => {
pause();
onPause?.();
}, [pause]);
return (_jsxs(View, { style: [Css.mainView, style], children: [title !== undefined && (_jsx(Text, { style: [Css.titleText, titleStyle], children: title })), children, (!hideBack || !hideNext || showPause) && (_jsxs(View, { style: Css.footerView, children: [!hideBack && (_jsx(TouchableOpacity, { style: [Css.navButton, backStyle], onPress: handleBack, children: _jsx(Text, { children: backText }) })), showPause && (_jsx(TouchableOpacity, { style: [Css.navButton, pauseStyle], onPress: handlePause, children: _jsx(Text, { children: pauseText }) })), !hideNext && (_jsx(TouchableOpacity, { style: [Css.navButton, nextStyle], onPress: handleNext, children: _jsx(Text, { children: nextText }) }))] }))] }));
}
//# sourceMappingURL=TourBox.component.js.map