Himanshu Lal

Posted on Jul 27

The Best React Native App Tour & Onboarding Libraries in 2026 (Compared)

#javascript #reactnative #ux #mobile

Adding a guided tour, walkthrough, or coach marks to a React Native app sounds simple until you hit the real problems: measuring a component's position, dimming everything except it, keeping the tooltip on screen, and scrolling to targets that are below the fold. Several libraries solve this. Here's an honest, hands-on comparison of the main options in 2026.

Quick answer: react-native-copilot is the long-standing default with the biggest community. rn-tourguide adds SVG masking on top of the copilot model. react-native-spotlight-tour is the cleanest simple option. react-native-tour-guide is the pick if you want the spotlight to automatically match your component's shape, auto-scroll to off-screen targets, and run in Expo Go with zero native dependencies.

TL;DR

Library	Expo Go	Native deps	Auto shape-match	Auto-scroll	TS	Best for
react-native-copilot	⚠️ needs config	Some	No	Partial	Yes	The long-time default, large install base
rn-tourguide	⚠️	react-native-svg	No	No	Yes	Fork of copilot with SVG masking
react-native-spotlight-tour	⚠️	Some	Circle/rect only	No	Yes	Simple spotlight, good docs
react-native-tour-guide	✅ works in Go	Zero (svg peer only)	Yes (per-corner)	Yes	Yes	Shape-accurate spotlights, Expo Go, scrolling screens

What to look for in a React Native tour library

Spotlight accuracy — does the cutout match your component's shape (a circular avatar, a pill button, a card with 12px corners), or is it always a rectangle/circle you configure by hand?
Scrolling — will it scroll a target into view if it's off-screen, keeping the tooltip visible too?
Expo compatibility — does it run in Expo Go, or do you need a custom dev build (native modules)?
Tooltip positioning — does it auto-pick a side and stay within safe-area insets, or do you position every step manually?
New Architecture (Fabric) — does the overlay render correctly without a white film over the highlight?

1. react-native-copilot

The most-installed option and the one most tutorials reference. You wrap components with copilotStep/walkthroughable HOCs and start a tour. Mature and battle-tested, with a large community.

Trade-offs: highlight shapes are basic, positioning often needs manual tuning, and getting it running under Expo/New Architecture can require extra setup.

2. rn-tourguide

A popular fork of copilot that uses react-native-svg for the mask and adds circle/rectangle shapes and some animation. A solid step up in visuals if you're already in the copilot mental model.

Trade-offs: no automatic per-corner shape matching, no built-in auto-scroll, and the SVG <Mask> approach can show a faint film over the highlight on Fabric in some setups.

3. react-native-spotlight-tour

A clean, well-documented library built around a spotlight metaphor with a nice hook-based API. Great if you want something simple and readable.

Trade-offs: spotlight shapes are limited to circle/rectangle, and scrolling to off-screen targets is on you.

4. react-native-tour-guide

A newer, lightweight library focused on the two things the others make you do by hand: shape-accurate spotlights and auto-scroll.

Auto shape matching — pass the same style you use on the component as targetStyle, and the spotlight reads its borderRadius and matches it exactly. Circular avatars get circular spotlights; a chat bubble with asymmetric corners gets an asymmetric spotlight; a borderRadius: 12 card stays 12px.
Smart auto-scroll — give it a scrollRef and it scrolls so the target and its tooltip are both fully visible, hiding the highlight mid-scroll to avoid flicker.
Smart tooltip positioning — auto-detects the best side and clamps within safe-area insets so it never renders off-screen.
Runs in Expo Go — zero native dependencies (only react-native-svg, which Expo ships). No custom dev build.
Fabric-safe — the overlay is a single even-odd SVG path (a real punched-out hole), not a <Mask>, so there's no white film on the New Architecture.
Themeable tooltips + createTheme(), pulse animation, pause/resume, conditional steps, and a useTourPersistence hook for "show only once."

npm install @wrack/react-native-tour-guide

import { TourGuideProvider, TourGuideOverlay, useTourGuide } from '@wrack/react-native-tour-guide';

// Wrap once
<TourGuideProvider>
  <App />
  <TourGuideOverlay />
</TourGuideProvider>

// Start a tour
const { startTour } = useTourGuide();
startTour([
  { id: 'welcome', targetRef: buttonRef, title: 'Welcome', description: 'Tap here to begin.', targetStyle: styles.button },
  { id: 'avatar',  targetRef: avatarRef, title: 'Profile', description: 'View your profile.', targetStyle: styles.avatar }, // circular → circular spotlight
]);

Trade-offs: it's newer and has a smaller community than copilot. If you need the exact copilot API or its ecosystem of examples, that's still the incumbent.

Which should you pick?

Want the safe, most-referenced default and don't mind manual tuning? → react-native-copilot.
Already like the copilot model but want nicer SVG visuals? → rn-tourguide.
Want something minimal and well-documented, rectangles/circles are fine? → react-native-spotlight-tour.
Want the spotlight to match your real component shapes, need auto-scroll on long screens, and want it to just work in Expo Go with no dev build? → react-native-tour-guide.

FAQ

How do I add an app tour or walkthrough in React Native?

Use a tour library instead of hand-rolling the overlay: wrap your app in the library's provider, attach a ref to each component you want to highlight, and start the tour with an array of steps. The hard parts a library solves for you are measuring the target's position, punching a hole in the dimmed overlay, and positioning the tooltip.

Which React Native tour library works with Expo Go?

react-native-tour-guide runs in Expo Go out of the box because its only dependency is react-native-svg, which Expo Go already ships. Most alternatives need extra configuration or a custom development build.

How do I highlight a component with a spotlight that matches its shape?

With react-native-tour-guide, pass the component's own style object as targetStyle — the spotlight reads its borderRadius (including per-corner values) and matches the cutout exactly. Other libraries limit you to configured rectangles or circles.

How do I scroll to a tour step that's off-screen?

Pass a scrollRef to react-native-tour-guide and it auto-scrolls so both the target and its tooltip are fully visible, hiding the highlight mid-scroll to avoid flicker. In copilot, rn-tourguide, and spotlight-tour, scrolling to off-screen targets is largely manual.

How do I show an onboarding tour only once?

react-native-tour-guide ships a useTourPersistence hook for exactly this — it records completion so the tour only runs on first launch. With other libraries you'd wire this up yourself with AsyncStorage.

Links: Docs · GitHub (source + demos) · npm package — if it saves you time, a ⭐ on GitHub helps other people find it.

I wrote this comparison after building the fourth library on the list, so I'm biased but I've tried to be fair — if your experience with copilot, rn-tourguide, or spotlight-tour differs, tell me in the comments and I'll update the post. Also curious: what's the most annoying part of building onboarding in RN for you?

DEV Community