Coach mark

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/coach-mark.json

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/coach-mark.

Usage

import { useRef, useState, type ComponentRef } from "react";
import { View } from "react-native";
import { CoachMark } from "@/components/goodui-native/coach-mark/coach-mark";
import { IconButton } from "@/components/goodui-native/icon-button/icon-button";
import { SearchBar } from "@/components/goodui-native/search-bar/search-bar";
import { ComposeIcon } from "./icons"; // your own icon

export function InboxScreen() {
  const searchRef = useRef<ComponentRef<typeof View>>(null);
  const composeRef = useRef<ComponentRef<typeof View>>(null);
  const [tour, setTour] = useState(true);
  return (
    <View style={{ flex: 1, padding: 16, gap: 16 }}>
      <View ref={searchRef} collapsable={false}>
        <SearchBar placeholder="Search messages" />
      </View>
      {/* message list */}
      <View ref={composeRef} collapsable={false} style={{ position: "absolute", right: 16, bottom: 32 }}>
        <IconButton icon={(c, s) => <ComposeIcon color={c} size={s} />} accessibilityLabel="New message" variant="solid" tone="accent" />
      </View>
      <CoachMark
        open={tour}
        onOpenChange={setTour}
        steps={[
          { target: searchRef, title: "Find any message", description: "Search names, words and attachments." },
          { target: composeRef, shape: "circle", title: "Start a conversation", description: "Write to one person or a group." },
        ]}
      />
    </View>
  );
}

When to use

Examples

<View ref={filtersRef} collapsable={false}>
  <ChipGroup options={filters} value={value} onValueChange={setValue} />
</View>

<CoachMark
  open={open}
  onOpenChange={setOpen}
  steps={steps}
  backdropPress="next"
  labels={{ next: "Weiter", back: "Zurück", skip: "Überspringen", done: "Fertig", stepOf: (s, t) => `${s} von ${t}` }}
/>

API reference

Motion and haptics

• •Open: the dim fades in and the hole starts 44 pt wider than the target and closes in on it (a focus pull) on the morph spring.
• •Next and Back: the hole's position, size and corner radius spring to the next target on the morph spring, so a wide card hole becomes a round button hole in flight; the tooltip glides on the smooth spring, its arrow tracks the target and flips sides with a fade; the step text crossfades.
• •A 2 pt accent ring pulses out of the hole once per arrival.
• •Reduced motion: the hole and tooltip move at once and the content crossfades; no focus pull, no ring.

• •Haptic: select on every step change, tap on Skip, success on Done. haptic={false} turns them off.

• •The dim is one view with a very wide border whose inner edge is the hole, so the cut-out is plain layout animated on the UI thread: no svg masks, no snapshots.
• •Targets are measured once per step and when the window size changes.

Accessibility

• •The tooltip is modal (accessibilityViewIsModal; role dialog, aria-modal and aria-labelledby the step title on the web).
• •Each step announces 'N of M', its title and description.
• •Skip, Back and Next/Done are goodui Buttons. Escape on the web and the Android back button skip the tour.
• •The dim blocks touches to the app; with backdropPress set it is a button labelled after what it does (Next, Done or Skip tour).

Notes for AI

Related