RN-TourGuide Enhanced

import React from 'react'
import { View, Text, Button } from 'react-native'
import {
  TourGuideProvider,
  TourGuideZone,
  useTourGuideController,
} from 'rn-tourguide-enhanced'

function App() {
  return (
    <TourGuideProvider>
      <AppContent />
    </TourGuideProvider>
  )
}

const AppContent = () => {
  const { start, canStart } = useTourGuideController()

  React.useEffect(() => {
    if (canStart) {
      start() // Start tour when ready
    }
  }, [canStart])

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <TourGuideZone
        zone={1}
        text='Welcome! This is your first step with arrows!'
      >
        <Text style={{ fontSize: 24 }}>Hello World</Text>
      </TourGuideZone>

      <TourGuideZone zone={2} text='Click me to continue the tour'>
        <Button title='Next Step' onPress={() => {}} />
      </TourGuideZone>
    </View>
  )
}

export default App

// Customize arrow appearance per step
<TourGuideZone
  zone={1}
  text="Custom arrow style"
  leaderLineConfig={{
    color: '#FF6B6B',
    size: 3,
    startPlug: 'circle',
    endPlug: 'arrow3',
    path: 'arc'
  }}
>
  <Button title="Highlighted Element" />
</TourGuideZone>

// Control tooltip positioning strategy
<TourGuideZone
  zone={1}
  tooltipPosition="auto"  // 'relative' | 'centered' | 'auto'
  maskOffset={{ top: 20, bottom: 15, left: 10, right: 25 }}
>
  <Component />
</TourGuideZone>

const AppContent = () => {
  const scrollRef = React.useRef(null)
  const { start, canStart } = useTourGuideController()

  React.useEffect(() => {
    if (canStart) {
      start(1, scrollRef) // Auto-scroll to steps
    }
  }, [canStart])

  return (
    <ScrollView ref={scrollRef}>
      <TourGuideZone zone={1} text="Auto-scrolls into view">
        <Content />
      </TourGuideZone>
    </ScrollView>
  )
}

// Pass custom data to tooltips with TypeScript support
interface MyTooltipData {
  title: string
  image?: ImageSourcePropType
}

<TourGuideProvider<MyTooltipData> tooltipComponent={CustomTooltip}>
  <TourGuideZone
    zone={1}
    tooltipCustomData={{
      title: "Welcome",
      image: require('./welcome.png')
    }}
  >
    <Component />
  </TourGuideZone>
</TourGuideProvider>

import { StatusBar, Platform } from 'react-native'

const customOffset =
  Platform.OS === 'android' ? StatusBar.currentHeight ?? 0 : 24

<TourGuideProvider statusBarOffset={customOffset}>
  <AppContent />
</TourGuideProvider>

// Multiple components can control the same tour
// HeaderComponent.tsx
const HeaderActions = () => {
  const { start, stop } = useTourGuideController('onboarding')
  return <Button title="Start Tour" onPress={() => start()} />
}

// SidebarComponent.tsx
const SidebarActions = () => {
  const { start, canStart } = useTourGuideController('onboarding')  // Same tourKey!
  return canStart ? <Button title="Begin" onPress={() => start()} /> : null
}

// Flexible tourKey assignment
const { start, TourGuideZone } = useTourGuideController()

return (
  <>
    {/* Specify tourKey per zone */}
    <TourGuideZone tourKey="onboarding" zone={1} text="Welcome">
      <Component1 />
    </TourGuideZone>

    {/* Or use pre-keyed component from hook */}
    <TourGuideZone zone={1} text="Step 1">
      <Component2 />
    </TourGuideZone>

    {/* Or override the hook's tourKey */}
    <TourGuideZone tourKey="advanced" zone={1} text="Advanced">
      <Component3 />
    </TourGuideZone>
  </>
)