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:
Download Details:
Author: xcarpentier
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/xcarpentier/rn-tourguide
License: MIT