Skip to content
GuidewayGuideway

Quick start

Three steps: wrap your app in a TourProvider, mark the views you want to highlight with useTourTarget, and start the tour with useTour.

1. Wrap your app

Section titled “1. Wrap your app”

Pass your tours (plain data) and safe-area insets to the provider, once, near the root.

import { TourProvider } from 'guideway';
import { useSafeAreaInsets } from 'react-native-safe-area-context';


const tours = [
  {
    id: 'main',
    steps: [
      { id: 'search', title: 'Find anything', body: 'Search your whole workspace from here.' },
      { id: 'create', title: 'Create instantly', body: 'Tap + to start something new.' },
    ],
  },
];


export default function App() {
  const insets = useSafeAreaInsets();
  return (
    <TourProvider tours={tours} insets={insets}>
      <HomeScreen />
    </TourProvider>
  );
}

2. Mark your targets

Section titled “2. Mark your targets”

useTourTarget(id) returns a ref. Attach it to the view that step should highlight. The id must match the step’s id.

import { useTourTarget } from 'guideway';


function HomeScreen() {
  const searchRef = useTourTarget('search');
  const createRef = useTourTarget('create');
  return (
    <View>
      <TextInput ref={searchRef} placeholder="Search" />
      <Pressable ref={createRef}>
        <Text>+</Text>
      </Pressable>
    </View>
  );
}

3. Start the tour

Section titled “3. Start the tour”

useTour() gives you the controller. Call start(tourId).

import { useTour } from 'guideway';


function HelpButton() {
  const { start } = useTour();
  return <Button title="Show me around" onPress={() => start('main')} />;
}

That is a complete tour: the spotlight highlights the search field and shows its tooltip, Next advances to the + button, and Done ends the tour.

Where to go next

Section titled “Where to go next”