import { createContext , useContext } from "react" ; import { LayoutRectangle , Omit } from "react-native" ; export enum Align { SCREEN = "screen" , SPOT = "spot" } export enum Position { BOTTOM = "bottom" , LEFT = "left" , RIGHT = "right" , TOP = "top" } export type RenderProps = Pick < SpotlightTourCtx , "next" | "previous" | "stop" > & { current : number ; isFirst : boolean ; isLast : boolean ; } ; export interface TourStep { alignTo ? : Align ; before ? ( ) : void | Promise < void > ; render ( props ) : React . ReactNode ; position : Position ; } export interface SpotlightTourCtx { changeSpot ( spot ) : void ; current ? : number ; goTo ( index ) : void ; next ( ) : void ; previous ( ) : void ; spot ? : LayoutRectangle ; start ( ) : void ; steps : TourStep [ ] ; stop ( ) : void ; } export const SpotlightTourContext = createContext < SpotlightTourCtx > ( { changeSpot : ( ) => undefined , goTo : ( ) => undefined , next : ( ) => undefined , previous : ( ) => undefined , start : ( ) => undefined , steps : [ ] , stop : ( ) => undefined } ) ; export type SpotlightTour = Omit < SpotlightTourCtx , "changeSpot" | "spot" | "steps" > ; export function useSpotlightTour ( ) { const { current , goTo , next , previous , start , stop } = useContext ( SpotlightTourContext ) ; return { current , goTo , next , previous , start , stop } ; }