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