diff --git a/App.tsx b/App.tsx index 84d14aedb..a4457524c 100644 --- a/App.tsx +++ b/App.tsx @@ -21,7 +21,7 @@ const uri = // Add at the root of you app! function App() { return ( - + ) @@ -31,16 +31,21 @@ const AppContent = () => { const iconProps = { size: 40, color: '#888' } // Use Hooks to control! - const { start, stop, eventEmitter } = useTourGuideController() + const { start, canStart, stop, eventEmitter } = useTourGuideController() + + React.useEffect(() => { + // start at mount + if (canStart) { + start() + } + }, [canStart]) // wait until everything is registered React.useEffect(() => { eventEmitter.on('start', () => console.log('start')) eventEmitter.on('stop', () => console.log('stop')) eventEmitter.on('stepChange', () => console.log(`stepChange`)) - return () => eventEmitter.off('*', null) }, []) - return ( {/* Use TourGuideZone only to wrap */} diff --git a/README.md b/README.md index 7254732d6..16ec620a6 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,13 @@ const AppContent = () => { // Use Hooks to control! const { start, stop, eventEmitter } = useTourGuideController() + // Can start at mount 🎉 + React.useEffect(() => { + if (canStart) { + start() + } + }, [canStart]) // but need to wait until everything is registered 😁 + React.useEffect(() => { eventEmitter.on('start', () => console.log('start')) eventEmitter.on('stop', () => console.log('stop')) @@ -159,6 +166,7 @@ interface TourGuideZoneProps { shape?: Shape // which shape maskOffset?: number // offset around zone borderRadius?: number // round corner when rectangle + startAtMount?: boolean // start at mount children: React.ReactNode } diff --git a/package.json b/package.json index 6d3e2763b..05487c08b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rn-tourguide", - "version": "2.4.0", + "version": "2.4.1", "description": "Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)", "main": "node_modules/expo/AppEntry.js", "types": "lib/index.d.ts", diff --git a/src/components/TourGuideContext.ts b/src/components/TourGuideContext.ts index 564a4938f..96c0d85e1 100644 --- a/src/components/TourGuideContext.ts +++ b/src/components/TourGuideContext.ts @@ -10,10 +10,13 @@ export interface Emitter { export interface ITourGuideContext { eventEmitter?: Emitter + canStart: boolean registerStep?(step: IStep): void unregisterStep?(stepName: string): void getCurrentStep?(): IStep | undefined start?(fromStep?: number): void stop?(): void } -export const TourGuideContext = React.createContext({}) +export const TourGuideContext = React.createContext({ + canStart: false, +}) diff --git a/src/components/TourGuideProvider.tsx b/src/components/TourGuideProvider.tsx index 840a9ad35..e20ab42e5 100644 --- a/src/components/TourGuideProvider.tsx +++ b/src/components/TourGuideProvider.tsx @@ -49,6 +49,7 @@ export const TourGuideProvider = ({ const [visible, setVisible] = useState(undefined) const [currentStep, updateCurrentStep] = useState() const [steps, setSteps] = useState({}) + const [canStart, setCanStart] = useState(false) const startTries = useRef(0) const mounted = useIsMounted() @@ -70,8 +71,11 @@ export const TourGuideProvider = ({ }, [visible, currentStep]) useEffect(() => { - if (startAtMount && mounted && Object.entries(steps).length > 0) { - start() + if (mounted && Object.entries(steps).length > 0) { + setCanStart(true) + if (startAtMount) { + start() + } } }, [mounted, steps]) @@ -172,6 +176,7 @@ export const TourGuideProvider = ({ getCurrentStep, start, stop, + canStart, }} > {children} diff --git a/src/hooks/useTourGuideController.ts b/src/hooks/useTourGuideController.ts index ea3337aa7..ad11db25b 100644 --- a/src/hooks/useTourGuideController.ts +++ b/src/hooks/useTourGuideController.ts @@ -2,13 +2,18 @@ import * as React from 'react' import { TourGuideContext } from '../components/TourGuideContext' export const useTourGuideController = () => { - const { start, stop, eventEmitter, getCurrentStep } = React.useContext( - TourGuideContext, - ) + const { + start, + canStart, + stop, + eventEmitter, + getCurrentStep, + } = React.useContext(TourGuideContext) return { start, stop, eventEmitter, getCurrentStep, + canStart, } }