guideway

Product tours, coachmarks, and spotlight onboarding for React Native and Expo. Fabric-first, Reanimated-powered, hook-first, TypeScript-first.

• Spotlight tours with an animated cutout (rect / rounded / circle / pill)
• Smart tooltips - flip/shift to stay on-screen, safe-area aware
• Theming - built-in light/dark + colorScheme + tokens, or a custom tooltip
• Interactive spotlight - tap through to the real element; keyboard-aware
• Auto-scroll - brings off-screen targets into view (ScrollView + FlatList)
• Persistence - showOnce tours auto-fire once via a pluggable storage adapter (AsyncStorage/MMKV)
• Hook-first, no HOCs, tours are plain data

Install

Expo (recommended):

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

Bare React Native:

npm install guideway react-native-reanimated react-native-svg

Usage

import { TourProvider, useTour, useTourTarget } from 'guideway';

function Screen() {
  const search = useTourTarget('search');
  const { start } = useTour();
  return (
    <View>
      <TextInput ref={search} placeholder="Search" />
      <Button title="Show me around" onPress={() => start('main')} />
    </View>
  );
}

const tours = [{ id: 'main', steps: [{ id: 'search', title: 'Find anything', body: 'Search here.' }] }];
// wrap your app: <TourProvider tours={tours}><Screen /></TourProvider>

See the repository for full docs, recipes, and an example app that demos every feature. MIT licensed.