React Native Tour Guide — App Tours, Walkthroughs & Coach Marks

React Native Tour Guide

The lightweight way to add app tours, walkthroughs, onboarding flows, and coach marks to a React Native app. The spotlight automatically matches each component’s shape — circular avatars get circular spotlights, pill buttons stay pill-shaped, cards keep their exact corner radius — with no manual configuration. Works with Expo (including Expo Go) and React Native CLI, ships zero native dependencies, is written in TypeScript, and is New Architecture (Fabric) ready.

npm install @wrack/react-native-tour-guide react-native-svg
# Expo:
npx expo install @wrack/react-native-tour-guide react-native-svg

Why choose it

• Auto shape-matching spotlight — pass your component’s style and the cutout matches its border radius (uniform, per-corner, pill, circle).
• Smart auto-scroll — scrolls off-screen targets into view, keeping the target and tooltip visible, with no flicker.
• Smart tooltip positioning — auto-picks the best side and stays within safe-area insets.
• Runs in Expo Go — only react-native-svg is required; no custom dev build.
• Fabric-safe overlay — a real even-odd SVG cutout, so no white film over the highlight on the New Architecture.
• Themeable — 4 built-in themes + createTheme(), pulse animation, pause/resume, conditional steps, and “show once” persistence.
• Tiny — under 50KB.

Quick links

• Getting started
• How to build a React Native app tour
• React Native walkthrough guide
• Coach marks & feature discovery
• User onboarding tutorial
• Expo onboarding tour (Expo Go compatible)
• FAQ

Comparisons

• react-native-copilot alternative
• rn-tourguide alternative

Install & source

• 📦 Install from npm · ⭐ Star on GitHub