Migrating
If you are here because a tour library stopped working on the New Architecture, that is the common thread: react-native-copilot, rn-tourguide, and react-native-spotlight-tour were built for the old architecture and broke when Fabric became the default. Guideway started on Fabric.
The mental model is similar across all three, so migration is mostly mechanical.
The mapping
Section titled “The mapping”| What you had | In Guideway |
|---|---|
Wrapping components in a HOC / walkthroughable / AttachStep |
A ref from useTourTarget(id) on the target view |
| Steps defined as components or props scattered across the tree | A tour as plain data: { id, steps: [{ id, title, body }] } |
A start() / start(stepNumber) call |
useTour().start(tourId) |
next / prev / stop handlers |
useTour() -> next, back, skip, stop |
| Custom tooltip component prop | tooltipComponent (global) or a step’s render |
| Library-specific theming props | colorScheme + theme tokens |
General steps
Section titled “General steps”- Install Guideway and its peers (see Installation).
- Wrap your app in a single
TourProvider, passinginsetsfromuseSafeAreaInsets(). - Replace each highlighted element’s wrapper with a ref:
const ref = useTourTarget('step-id')and<View ref={ref} />. - Move your step definitions into a
toursarray, keying each step’sidto the matchinguseTourTargetid. - Replace the old start/next/stop calls with the
useTour()controller.
From react-native-copilot
Section titled “From react-native-copilot”Copilot uses copilot() HOCs and walkthroughable wrappers. Drop the HOC; mark targets with useTourTarget. Copilot’s CopilotStep name/order become a step id and array position. start() becomes start(tourId).
From rn-tourguide
Section titled “From rn-tourguide”Replace TourGuideProvider with TourProvider, and TourGuideZone wrappers with a useTourTarget ref on the same view. The zone number maps to the step’s array position; give each a stable id.
From react-native-spotlight-tour
Section titled “From react-native-spotlight-tour”Spotlight-tour is the closest in spirit (spotlight + steps). Replace its SpotlightTourProvider and AttachStep with TourProvider and useTourTarget. Its per-step shape maps to Guideway’s cutout.shape (rect / rounded / circle / pill).
Once migrated you also get what those libraries lack on Fabric: auto-scroll, FlatList support, built-in theming, and show-once persistence.
