feat: 🎸 add canStart at hook useTourGuideController

App.tsx

@@ -21,7 +21,7 @@ const uri =
 // Add <TourGuideProvider/> at the root of you app!
 function App() {
   return (
-    <TourGuideProvider {...{ borderRadius: 16, startAtMount: true }}>
+    <TourGuideProvider {...{ borderRadius: 16 }}>
       <AppContent />
     </TourGuideProvider>
   )
@@ -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 (
     <View style={styles.container}>
       {/* Use TourGuideZone only to wrap */}

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
 }
 

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",

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<ITourGuideContext>({})
+export const TourGuideContext = React.createContext<ITourGuideContext>({
+  canStart: false,
+})

src/components/TourGuideProvider.tsx

@@ -49,6 +49,7 @@ export const TourGuideProvider = ({
   const [visible, setVisible] = useState<boolean | undefined>(undefined)
   const [currentStep, updateCurrentStep] = useState<IStep | undefined>()
   const [steps, setSteps] = useState<Steps>({})
+  const [canStart, setCanStart] = useState<boolean>(false)
 
   const startTries = useRef<number>(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}

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,
   }
 }