manuthecoder-react-native-spotlight-tour/dist/lib/SpotlightTour.provider.d.ts

React Native library to implement a highly customizable app tour feature with an awesome spotlight effect

import { type ChildFn } from "../helpers/common";
import { type BackdropPressBehavior, type Motion, type OSConfig, type Shape, type ShapeOptions, type SpotlightTour, type TooltipProps, type TourState, type TourStep } from "./SpotlightTour.context";
import type { ColorValue } from "react-native";
export interface SpotlightTourProviderProps extends TooltipProps {
    /**
     * The children to render in the provider. It accepts either a React
     * component, or a function that returns a React component. When the child is
     * a function, the `SpotlightTour` context can be accessed from the first
     * argument.
     */
    children: ChildFn<SpotlightTour> | React.ReactNode;
    /**
     * Sets the default transition motion for all steps. You can override this
     * value on each step too.
     *
     * @default bounce
     */
    motion?: Motion;
    /**
     * Define if the animations in the tour should use the native driver or not.
     * A boolean can be used to apply the same value to both Android and iOS, or
     * an object with `android` and `ios` keys can be used to define a value for
     * each OS.
     *
     * @default false
     */
    nativeDriver?: boolean | OSConfig<boolean>;
    /**
     * Sets the default behavior of pressing the tour's backdrop. You can use
     * either one of the following values:
     * - A callback function with the {@link SpotlightTour} options object in the
     * first argument. This allows more granular control over the tour.
     * - The `continue` literal string, which is a shortcut to move to the next
     * step, and stop the tour on the last step.
     * - the `stop` literal string, which is a shortcut to stop the tour.
     *
     * **NOTE:** You can also override this behavior on each step configuration.
     */
    onBackdropPress?: BackdropPressBehavior;
    /**
     * Handler which gets executed when {@link SpotlightTour.pause|pause} is
     * invoked. It receives the {@link TourState} so
     * you can access the step index where the tour paused.
     */
    onPause?: (values: TourState) => void;
    /**
     * Handler which gets executed when {@link SpotlightTour.resume|resume} is
     * invoked. It receives the {@link ResumeParams} so
     * you can access the step index where the tour resumed.
     */
    onResume?: (values: TourState) => void;
    /**
     * Handler which gets executed when {@link SpotlightTour.stop|stop} is
     * invoked. It receives the {@link TourState} so
     * you can access the `current` step index where the tour stopped
     * and a bool value `isLast` indicating if the step where the tour stopped is
     * the last one.
     */
    onStop?: (values: TourState) => void;
    /**
     * The color of the overlay of the tour.
     *
     * @default black
     */
    overlayColor?: ColorValue;
    /**
     * The opacity applied to the overlay of the tour (between 0 to 1).
     *
     * @default 0.45
     */
    overlayOpacity?: number;
    /**
     * Configures the default spotlight shape for all steps. You can override
     * this value on each step too.
     *
     * @default circle
     */
    shape?: Shape | ShapeOptions;
    /**
     * An array of `TourStep` objects that define each step of the tour.
     */
    steps: TourStep[];
}
/**
 * React provider component to get access to the SpotlightTour context.
 */
export declare const SpotlightTourProvider: import("react").ForwardRefExoticComponent<SpotlightTourProviderProps & import("react").RefAttributes<SpotlightTour>>;