rn-tourguide alternative

rn-tourguide wraps each highlighted view in a TourGuideZone with a zone number and draws an SVG overlay around it. It was built for the old architecture: its last release (3.3.2) shipped in October 2024, and New Architecture support requests have been open since September 2025 without a maintainer response, with users reporting broken tours and crashes after upgrading. Its zone-number ordering was always brittle to refactors, too.

Guideway does the same job with a Fabric-first overlay, refs instead of wrapper views, and tours defined as plain data instead of numbers scattered across the tree.

Guideway vs rn-tourguide

Capability	Guideway	rn-tourguide
Works on the New Architecture (Fabric)	Yes	No
Step identity	Stable string ids in one array	zone numbers spread across components
Wrapper views around your elements	None (a ref)	TourGuideZone around every target
Animated, reshaping spotlight	Yes - rect / rounded / circle / pill, on the UI thread	Animated SVG (old architecture)
Auto-scroll to off-screen targets	Yes (ScrollView + FlatList)	No
Light / dark theming built in	Yes (colorScheme, tokens)	No
Show-once persistence	Yes (pluggable storage)	No
Runs in Expo Go	Yes	-

Migrating

Before, with rn-tourguide:

<TourGuideProvider>
  <TourGuideZone zone={1} text="Search your library">
    <SearchBar />
  </TourGuideZone>
</TourGuideProvider>

After, with Guideway:

function Screen() {
  const search = useTourTarget('search');
  return <SearchBar ref={search} />;
}

const tours = [{
  id: 'main',
  steps: [{ id: 'search', title: 'Find anything', body: 'Search your library' }],
}];

<TourProvider tours={tours}><Screen /></TourProvider>

The mapping:

1. TourGuideProvider becomes TourProvider, with insets from useSafeAreaInsets().
2. Each TourGuideZone wrapper becomes a ref from useTourTarget(id) on the view itself - the wrapper view disappears, so your layout stops shifting.
3. Each zone number becomes a step’s position in the steps array; give every step a stable string id so reordering is a one-line change.
4. The zone’s text becomes the step’s title + body - real fields instead of one string.
5. useTourGuideController().start() becomes useTour().start('main'); event-emitter callbacks map to the controller’s next, back, skip, stop and tour callbacks.
6. borderRadius on a zone maps to the step’s cutout - { shape: 'rounded' }, or circle / pill / rect.

Full steps live in the migration guide.

What you gain after migrating

Auto-scroll brings off-screen targets into view before highlighting them - including virtualized FlatList rows rn-tourguide could never measure. Theming is built in, the spotlight can be tapped through to the real element, and show-once tours persist across launches.

Install

npx expo install guideway react-native-reanimated react-native-svg

Then follow the quick start.