Write it once.
Ship it twice.

# web
npm i @tourkit/react

# react native, same steps file
npm i @tourkit/native react-native-svg react-native-reanimated

import type { TourConfig } from "@tourkit/core";

type AppContext = { plan: "free" | "pro" };

export const onboarding: TourConfig<AppContext> = {
  id: "onboarding",
  version: 1,
  steps: [
    { id: "post",  target: "post-ride", title: "Post a ride", body: "Offer a seat here." },
    { id: "inbox", target: "inbox",     title: "Messages",    body: "Riders reach you here." },
    { id: "done",  target: null,        title: "That is the tour" },
  ],
};

import { TourProvider } from "@tourkit/react";

<TourProvider tours={[onboarding]} context={{ plan: "pro" }}>
  <App />
</TourProvider>;

// web: any element carrying the id
<button data-tour-id="post-ride">Post a ride</button>

// react native: the same id, wrapped
<TourTarget id="post-ride">
  <Button title="Post a ride" />
</TourTarget>;

import { useTour } from "@tourkit/react";

function Help() {
  const { start, running } = useTour();
  return <button onClick={() => start("onboarding")}>
    {running ? "Touring" : "Show me around"}
  </button>;
}