react-native-spotlight-tour alternative

react-native-spotlight-tour is the closest of the established libraries to Guideway in spirit: a real spotlight, step shapes, a floating tooltip. Unlike the others it is still actively maintained (v4.0.0 shipped in June 2025) - but it was built on the old architecture, and rendering on the New Architecture has open, unresolved reports: on Expo + Fabric the overlay draws while the cutout and tooltip stay invisible, an issue open since January 2026. Neither its README nor the v4 release notes mention New Architecture support.

Guideway keeps the spotlight-first model and builds it on Fabric from the start: measurement that works on the New Architecture, a Reanimated cutout that animates on the UI thread, and steps that are plain data instead of render props.

Guideway vs react-native-spotlight-tour

Capability	Guideway	react-native-spotlight-tour
Works on the New Architecture (Fabric)	Yes	Open unresolved bugs
Step definition	Plain data (title, body, cutout)	render functions in a steps array
Attaching to views	A ref from useTourTarget(id)	AttachStep wrapper + index
Spotlight shapes	rect / rounded / circle / pill, animated reshaping	circle / rectangle
Auto-scroll to off-screen targets	Yes (ScrollView + FlatList scrollToIndex)	Limited
Light / dark theming built in	Yes (colorScheme, tokens)	No
Show-once persistence	Yes (pluggable storage)	No
Runs in Expo Go	Yes	-

Migrating

Before, with react-native-spotlight-tour:

<SpotlightTourProvider steps={steps}>
  <AttachStep index={0}>
    <SearchBar />
  </AttachStep>
</SpotlightTourProvider>

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', cutout: { shape: 'circle' } }],
}];

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

The mapping:

1. SpotlightTourProvider becomes TourProvider, with insets from useSafeAreaInsets().
2. Each AttachStep wrapper becomes a ref from useTourTarget(id) on the element itself - no wrapper views.
3. The step’s index becomes its position in the steps array, keyed by a stable string id.
4. A step’s render function becomes title + body data; if you need full custom UI, use a per-step render or a global tooltipComponent - both exist in Guideway too.
5. Its shape maps directly to cutout.shape: circle stays circle, rectangle becomes rect - plus rounded and pill, which it never had.
6. useSpotlightTour().start() becomes useTour().start('main'); next / previous / stop map to next / back / stop.

Full steps live in the migration guide.

What you gain after migrating

Fabric-safe measurement is the reason to move, but the spotlight also auto-scrolls to off-screen targets (including FlatList rows), themes itself for light and dark, lets users tap through the hole to the real element, and remembers show-once tours across launches.

Install

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

Then follow the quick start.