Flexible Guided Tour For React Native App – rn-tourguide

---

rn-tourguide is a React Native component to create a flexible, step-by-step guided tour on your mobile app.

Install & Download:

# Yarn
$ yarn add rn-tourguide

# NPM
$ npm install rn-tourguide --save

Basic usage:

1. Import needed components from the rn-tourguide module.

import {
  // core
  TourGuideProvider,
  // Wrapper of the highlight component
  TourGuideZone,
  // Use mask on overlay
  TourGuideZoneByPosition,
  // Controller
  useTourGuideController
} from 'rn-tourguide'

2. Create a basic guided tour as follows:

import {
  // core
  TourGuideProvider,
  // Wrapper of the highlight component
  TourGuideZone,
  // Use mask on overlay
  TourGuideZoneByPosition,
  // Controller
  useTourGuideController
} from 'rn-tourguide'

function App() {
  return (
    <TourGuideProvider {...{ /* props here */ }}>
      <AppContent />
    </TourGuideProvider>
  )
}
const AppContent = () => {
  const iconProps = { /* icon props here */ }
  // Use Hooks to control!
  const { start, stop, eventEmitter } = useTourGuideController()
  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 your component
      */}
      <TourGuideZone
        zone={2}
        text={'A react-native-copilot remastered!'}
        borderRadius={16}
      >
        <Text style={styles.title}>
          {'Title Here'}
        </Text>
      </TourGuideZone>
      <View style={styles.middleView}>
        <TouchableOpacity style={styles.button} onPress={() => start()}>
          <Text style={styles.buttonText}>START THE TUTORIAL!</Text>
        </TouchableOpacity>
        <TourGuideZone zone={3} shape={'rectangle_and_keep'}>
          <TouchableOpacity style={styles.button} onPress={() => start(4)}>
            <Text style={styles.buttonText}>Step 4</Text>
          </TouchableOpacity>
        </TourGuideZone>
        <TouchableOpacity style={styles.button} onPress={() => start(2)}>
          <Text style={styles.buttonText}>Step 2</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={stop}>
          <Text style={styles.buttonText}>Stop</Text>
        </TouchableOpacity>
        <TourGuideZone
          zone={1}
          shape='circle'
          text={'With animated SVG morphing with awesome flubber'}
        >
          <Image source={{ uri }} style={styles.profilePhoto} />
        </TourGuideZone>
      </View>
      <View style={styles.row}>
        <TourGuideZone zone={4} shape={'circle'}>
          <Ionicons name='ios-contact' {...iconProps} />
        </TourGuideZone>
        <Ionicons name='ios-chatbubbles' {...iconProps} />
        <Ionicons name='ios-globe' {...iconProps} />
        <TourGuideZone zone={5}>
          <Ionicons name='ios-navigate' {...iconProps} />
        </TourGuideZone>
        <TourGuideZone zone={6} shape={'circle'}>
          <Ionicons name='ios-rainy' {...iconProps} />
        </TourGuideZone>
        <TourGuideZoneByPosition
          zone={7}
          shape={'circle'}
          isTourGuide
          bottom={30}
          left={35}
          width={300}
          height={300}
        />
      </View>
    </View>
  )
}

Preview: