react-native-onboarding-steps 1.0.0

package/lib/typescript/module/src/Button.d.ts

@@ -0,0 +1,15 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+type ButtonVariant = 'primary' | 'secondary';
+type ButtonProps = {
+    label?: string;
+    onPress: () => void;
+    variant?: ButtonVariant;
+    /** Overrides the variant's background. */
+    backgroundColor?: string;
+    /** Overrides the variant's label colour. */
+    labelColor?: string;
+    style?: StyleProp<ViewStyle>;
+};
+declare const Button: ({ label, onPress, variant, backgroundColor, labelColor, style, }: ButtonProps) => import("react").JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/lib/typescript/module/src/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3F,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAE7C,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,kEAOb,WAAW,gCAiBb,CAAC;AAgCF,eAAe,MAAM,CAAC"}

package/lib/typescript/module/src/Onboarding.d.ts

@@ -0,0 +1,4 @@
+import type { OnboardingProps } from './types.js';
+declare const Onboarding: ({ steps, initialStep, onComplete, onStepChange, onBack, stepsTheme, backButtonColor, backButtonLabelColor, backButton, continueButtonColor, continueButtonLabelColor, continueButton, style, contentStyle, }: OnboardingProps) => import("react").JSX.Element | null;
+export default Onboarding;
+//# sourceMappingURL=Onboarding.d.ts.map

package/lib/typescript/module/src/Onboarding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Onboarding.d.ts","sourceRoot":"","sources":["../../../../src/Onboarding.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAyB,eAAe,EAAE,MAAM,YAAS,CAAC;AAQtE,QAAA,MAAM,UAAU,GAAI,8MAejB,eAAe,uCA8FjB,CAAC;AAuBF,eAAe,UAAU,CAAC"}

package/lib/typescript/module/src/Step.d.ts

@@ -0,0 +1,11 @@
+import { type SharedValue } from 'react-native-reanimated';
+import type { StepsTheme } from './types.js';
+type StepProps = {
+    index: number;
+    /** Animated position of the track's leading edge, in step units. */
+    progress: SharedValue<number>;
+    theme: StepsTheme;
+};
+declare const Step: ({ index, progress, theme }: StepProps) => import("react").JSX.Element;
+export default Step;
+//# sourceMappingURL=Step.d.ts.map

package/lib/typescript/module/src/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/Step.tsx"],"names":[],"mappings":"AACA,OAAiB,EAGf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAE1C,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,IAAI,GAAI,4BAA4B,SAAS,gCAoBlD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/typescript/module/src/Steps.d.ts

@@ -0,0 +1,9 @@
+import type { OnboardingStep, StepsTheme } from './types.js';
+type StepsProps = {
+    steps: OnboardingStep[];
+    currentStep: number;
+    theme: StepsTheme;
+};
+declare const Steps: ({ steps, currentStep, theme }: StepsProps) => import("react").JSX.Element;
+export default Steps;
+//# sourceMappingURL=Steps.d.ts.map

package/lib/typescript/module/src/Steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../../src/Steps.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAE1D,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,KAAK,GAAI,+BAA+B,UAAU,gCA0CvD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/typescript/module/src/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Onboarding } from './Onboarding.js';
+export { default as Steps } from './Steps.js';
+export { default as Step } from './Step.js';
+export { default as Button } from './Button.js';
+export { defaultStepsTheme, resolveStepsTheme, trackWidth } from './theme.js';
+export type { OnboardingProps, OnboardingStep, OnboardingButtonProps, OnboardingButtonRenderer, StepsTheme, StepsThemeInput, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAU,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAE3E,YAAY,EACV,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,UAAU,EACV,eAAe,GAChB,MAAM,YAAS,CAAC"}

package/lib/typescript/module/src/theme.d.ts

@@ -0,0 +1,14 @@
+import type { StepsTheme, StepsThemeInput } from './types.js';
+/** The look the indicator falls back to when a field is not overridden. */
+export declare const defaultStepsTheme: StepsTheme;
+/** Fills a partial theme with the defaults, leaving a fully resolved object. */
+export declare const resolveStepsTheme: (input?: StepsThemeInput) => StepsTheme;
+/**
+ * Width of the track once it has swept `progress` steps past the first one.
+ *
+ * At `progress === 0` this is exactly one slot, so the track reads as a circle
+ * behind the first dot; at `progress === 1` it spans two slots plus the gap
+ * between them, visually connecting the two steps.
+ */
+export declare const trackWidth: (progress: number, stepSize: number, stepGap: number) => number;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/module/src/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAS,CAAC;AAE3D,2EAA2E;AAC3E,eAAO,MAAM,iBAAiB,EAAE,UAY/B,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,eAAe,KAAG,UAG1D,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,UAAU,MAAM,EAAE,UAAU,MAAM,EAAE,SAAS,MAAM,WAG7E,CAAC"}

package/lib/typescript/module/src/types.d.ts

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { WithSpringConfig } from 'react-native-reanimated';
+/**
+ * A single step of the onboarding flow.
+ *
+ * Everything except `id` is optional so a flow can be as thin as
+ * `[{ id: 0 }, { id: 1 }]` and still render.
+ */
+export type OnboardingStep = {
+    /** Stable identity for this step. Used as the React key. */
+    id: string | number;
+    /** What fills the area above the step indicator while this step is active. */
+    content?: ReactNode;
+    /** Overrides the default "Back" label while this step is active. */
+    backButtonLabel?: string;
+    /** Overrides the default "Continue" label while this step is active. */
+    continueButtonLabel?: string;
+    /** Overrides the default "Finish" label. Only used on the last step. */
+    finishButtonLabel?: string;
+};
+/**
+ * Fully resolved look of the animated step indicator. Every field is required
+ * here; consumers supply a `StepsThemeInput` and the gaps are filled from
+ * `defaultStepsTheme`.
+ */
+export type StepsTheme = {
+    /** Diameter of a step's slot — also the height of the track. */
+    stepSize: number;
+    /** Diameter of the dot drawn inside each slot. */
+    dotSize: number;
+    /** Horizontal space between two step slots. */
+    stepGap: number;
+    /** Colour of the pill that connects completed steps. */
+    trackColor: string;
+    /** Dot colour once the track has swept over it. */
+    activeDotColor: string;
+    /** Dot colour before the track reaches it. */
+    inactiveDotColor: string;
+    /** Spring driving the track's sweep and the dot colour crossfade. */
+    spring: WithSpringConfig;
+};
+/** Partial theme accepted from consumers; merged over `defaultStepsTheme`. */
+export type StepsThemeInput = Partial<StepsTheme>;
+/** Everything a custom button renderer needs to draw itself and act. */
+export type OnboardingButtonProps = {
+    /** Label resolved from the step, falling back to the built-in default. */
+    label: string;
+    /** Advances or rewinds the flow. Call this from your own component. */
+    onPress: () => void;
+    /** Zero-based index of the active step. */
+    currentStep: number;
+    /** Total number of steps in the flow. */
+    totalSteps: number;
+};
+/** A function returning the React element to use in place of a stock button. */
+export type OnboardingButtonRenderer = (props: OnboardingButtonProps) => ReactNode;
+export type OnboardingProps = {
+    /** The flow. Rendering is skipped entirely when this is empty. */
+    steps: OnboardingStep[];
+    /** Step to open on. Clamped into range. Defaults to 0. */
+    initialStep?: number;
+    /** Called when the primary button is pressed on the last step. The flow
+     *  stays on that step — navigating away is the consumer's call. */
+    onComplete?: () => void;
+    /** Called on every step change, forwards and backwards. */
+    onStepChange?: (index: number, step: OnboardingStep) => void;
+    /** Called when the back button moves the flow to a previous step.
+     *  `onStepChange` fires as well. */
+    onBack?: (index: number, step: OnboardingStep) => void;
+    /** Partial override of the step indicator's look. */
+    stepsTheme?: StepsThemeInput;
+    /** Background of the stock back button. */
+    backButtonColor?: string;
+    /** Label colour of the stock back button. */
+    backButtonLabelColor?: string;
+    /** Replaces the stock back button. Still fades in/out with the flow. */
+    backButton?: OnboardingButtonRenderer;
+    /** Background of the stock continue/finish button. */
+    continueButtonColor?: string;
+    /** Label colour of the stock continue/finish button. */
+    continueButtonLabelColor?: string;
+    /** Replaces the stock continue/finish button. */
+    continueButton?: OnboardingButtonRenderer;
+    /** Style for the outermost container. */
+    style?: StyleProp<ViewStyle>;
+    /** Style for the region that hosts the active step's `content`. */
+    contentStyle?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,4DAA4D;IAC5D,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,gBAAgB,EAAE,MAAM,CAAC;IACzB,qEAAqE;IACrE,MAAM,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,8EAA8E;AAC9E,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,wEAAwE;AACxE,MAAM,MAAM,qBAAqB,GAAG;IAClC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,gFAAgF;AAChF,MAAM,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAC;AAEnF,MAAM,MAAM,eAAe,GAAG;IAC5B,kEAAkE;IAClE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;uEACmE;IACnE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7D;wCACoC;IACpC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAEvD,qDAAqD;IACrD,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,wEAAwE;IACxE,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,wDAAwD;IACxD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAE1C,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC"}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "react-native-onboarding-steps",
+  "version": "1.0.0",
+  "description": "An animated, fully customizable onboarding flow for React Native and Expo, with a step indicator that grows into a single connected track.",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "rm -rf lib",
+    "prepare": "bob build",
+    "typecheck": "tsc --noEmit",
+    "example": "pnpm --filter react-native-onboarding-steps-example"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "onboarding",
+    "steps",
+    "stepper",
+    "walkthrough",
+    "intro",
+    "reanimated",
+    "animation",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ded3zito/react-native-onboarding-steps.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ded3zito/react-native-onboarding-steps/issues"
+  },
+  "homepage": "https://github.com/ded3zito/react-native-onboarding-steps#readme",
+  "author": "Andrew Azevedo",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-worklets": ">=0.10.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "^7.29.0",
+    "@types/react": "~19.2.2",
+    "react": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-reanimated": "^4.5.1",
+    "react-native-worklets": "^0.10.1",
+    "typescript": "~6.0.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/Button.tsx

@@ -0,0 +1,72 @@
+import { Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+
+type ButtonVariant = 'primary' | 'secondary';
+
+type ButtonProps = {
+  label?: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  /** Overrides the variant's background. */
+  backgroundColor?: string;
+  /** Overrides the variant's label colour. */
+  labelColor?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const Button = ({
+  label,
+  onPress,
+  variant = 'primary',
+  backgroundColor,
+  labelColor,
+  style,
+}: ButtonProps) => {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.container,
+        styles[variant],
+        backgroundColor ? { backgroundColor } : null,
+        style,
+        pressed && styles.pressed,
+      ]}
+    >
+      <Text style={[styles.text, styles[`${variant}Text`], labelColor ? { color: labelColor } : null]}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 45,
+    borderRadius: 100,
+    paddingHorizontal: 28,
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  primary: {
+    backgroundColor: '#4382DF',
+  },
+  secondary: {
+    backgroundColor: '#F1F1F1',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  primaryText: {
+    color: '#F7F4ED',
+  },
+  secondaryText: {
+    color: '#1C1C1E',
+  },
+});
+
+export default Button;

package/src/Onboarding.tsx

@@ -0,0 +1,147 @@
+import { useMemo, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
+import Button from './Button';
+import Steps from './Steps';
+import { resolveStepsTheme } from './theme';
+import type { OnboardingButtonProps, OnboardingProps } from './types';
+
+const DEFAULT_BACK_LABEL = 'Back';
+const DEFAULT_CONTINUE_LABEL = 'Continue';
+const DEFAULT_FINISH_LABEL = 'Finish';
+
+const clamp = (value: number, max: number) => Math.min(Math.max(value, 0), max);
+
+const Onboarding = ({
+  steps,
+  initialStep = 0,
+  onComplete,
+  onStepChange,
+  onBack,
+  stepsTheme,
+  backButtonColor,
+  backButtonLabelColor,
+  backButton,
+  continueButtonColor,
+  continueButtonLabelColor,
+  continueButton,
+  style,
+  contentStyle,
+}: OnboardingProps) => {
+  const lastIndex = Math.max(steps.length - 1, 0);
+  const [currentStep, setCurrentStep] = useState(() => clamp(initialStep, lastIndex));
+
+  const theme = useMemo(() => resolveStepsTheme(stepsTheme), [stepsTheme]);
+
+  // Guard after the hooks so the hook order stays stable for every render.
+  if (steps.length === 0) {
+    return null;
+  }
+
+  const index = clamp(currentStep, lastIndex);
+  const step = steps[index];
+  const isFirstStep = index === 0;
+  const isLastStep = index === lastIndex;
+
+  const goToStep = (next: number) => {
+    setCurrentStep(next);
+    onStepChange?.(next, steps[next]);
+  };
+
+  const onPressContinue = () => {
+    // The flow deliberately stays on the last step; where to go next is the
+    // consumer's decision, made inside onComplete.
+    if (isLastStep) {
+      onComplete?.();
+      return;
+    }
+    goToStep(index + 1);
+  };
+
+  const onPressBack = () => {
+    if (isFirstStep) return;
+    const previous = index - 1;
+    onBack?.(previous, steps[previous]);
+    goToStep(previous);
+  };
+
+  const continueLabel = isLastStep
+    ? step.finishButtonLabel ?? DEFAULT_FINISH_LABEL
+    : step.continueButtonLabel ?? DEFAULT_CONTINUE_LABEL;
+
+  const sharedButtonProps = { currentStep: index, totalSteps: steps.length };
+
+  const backProps: OnboardingButtonProps = {
+    ...sharedButtonProps,
+    label: step.backButtonLabel ?? DEFAULT_BACK_LABEL,
+    onPress: onPressBack,
+  };
+
+  const continueProps: OnboardingButtonProps = {
+    ...sharedButtonProps,
+    label: continueLabel,
+    onPress: onPressContinue,
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={[styles.content, contentStyle]}>{step.content}</View>
+
+      <Steps steps={steps} currentStep={index} theme={theme} />
+
+      <View style={styles.footer}>
+        {!isFirstStep && (
+          <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)}>
+            {backButton ? (
+              backButton(backProps)
+            ) : (
+              <Button
+                label={backProps.label}
+                onPress={backProps.onPress}
+                variant="secondary"
+                backgroundColor={backButtonColor}
+                labelColor={backButtonLabelColor}
+              />
+            )}
+          </Animated.View>
+        )}
+
+        <Animated.View style={styles.primaryAction} layout={LinearTransition.duration(250)}>
+          {continueButton ? (
+            continueButton(continueProps)
+          ) : (
+            <Button
+              label={continueProps.label}
+              onPress={continueProps.onPress}
+              backgroundColor={continueButtonColor}
+              labelColor={continueButtonLabelColor}
+            />
+          )}
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  content: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    width: '85%',
+    marginTop: 20,
+  },
+  primaryAction: {
+    flex: 1,
+  },
+});
+
+export default Onboarding;

package/src/Step.tsx

@@ -0,0 +1,38 @@
+import { View } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
+import type { StepsTheme } from './types';
+
+type StepProps = {
+  index: number;
+  /** Animated position of the track's leading edge, in step units. */
+  progress: SharedValue<number>;
+  theme: StepsTheme;
+};
+
+const Step = ({ index, progress, theme }: StepProps) => {
+  const { stepSize, dotSize, activeDotColor, inactiveDotColor } = theme;
+
+  // The dot flips colour across the short window where the track's edge is
+  // sweeping over it, so the two always look like one movement.
+  const dotStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [index - 0.65, index - 0.25],
+      [inactiveDotColor, activeDotColor],
+    ),
+  }));
+
+  return (
+    <View style={{ alignItems: 'center', justifyContent: 'center', width: stepSize, height: stepSize }}>
+      <Animated.View
+        style={[{ width: dotSize, height: dotSize, borderRadius: dotSize / 2 }, dotStyle]}
+      />
+    </View>
+  );
+};
+
+export default Step;

package/src/Steps.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import Step from './Step';
+import { trackWidth } from './theme';
+import type { OnboardingStep, StepsTheme } from './types';
+
+type StepsProps = {
+  steps: OnboardingStep[];
+  currentStep: number;
+  theme: StepsTheme;
+};
+
+const Steps = ({ steps, currentStep, theme }: StepsProps) => {
+  const { stepSize, stepGap, trackColor, spring } = theme;
+
+  // Leading edge of the track, in step units. Every visual change — the
+  // track's width and each dot's colour — is derived from this one value so
+  // the sweep and the dots stay in sync, including on the way back.
+  const progress = useSharedValue(currentStep);
+
+  // Held in a ref so an inline `stepsTheme={{ ... }}` — which hands us a new
+  // spring object on every render — cannot restart an in-flight animation.
+  // The step change is the only thing that should kick the spring off, and the
+  // ref is always current by the time it does.
+  const springRef = useRef(spring);
+  springRef.current = spring;
+
+  useEffect(() => {
+    progress.value = withSpring(currentStep, springRef.current);
+  }, [currentStep]);
+
+  const trackStyle = useAnimatedStyle(() => ({
+    width: trackWidth(progress.value, stepSize, stepGap),
+  }));
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: stepGap }}>
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            left: 0,
+            height: stepSize,
+            borderRadius: stepSize / 2,
+            backgroundColor: trackColor,
+          },
+          trackStyle,
+        ]}
+      />
+      {steps.map((item, index) => (
+        <Step key={item.id} index={index} progress={progress} theme={theme} />
+      ))}
+    </View>
+  );
+};
+
+export default Steps;

package/src/index.ts

@@ -0,0 +1,15 @@
+export { default as Onboarding } from './Onboarding';
+export { default as Steps } from './Steps';
+export { default as Step } from './Step';
+export { default as Button } from './Button';
+
+export { defaultStepsTheme, resolveStepsTheme, trackWidth } from './theme';
+
+export type {
+  OnboardingProps,
+  OnboardingStep,
+  OnboardingButtonProps,
+  OnboardingButtonRenderer,
+  StepsTheme,
+  StepsThemeInput,
+} from './types';

package/src/theme.ts

@@ -0,0 +1,34 @@
+import type { StepsTheme, StepsThemeInput } from './types';
+
+/** The look the indicator falls back to when a field is not overridden. */
+export const defaultStepsTheme: StepsTheme = {
+  stepSize: 26,
+  dotSize: 11,
+  stepGap: 9,
+  trackColor: '#7ADAA5',
+  activeDotColor: '#fff',
+  inactiveDotColor: '#696969',
+  spring: {
+    damping: 22,
+    stiffness: 180,
+    mass: 1,
+  },
+};
+
+/** Fills a partial theme with the defaults, leaving a fully resolved object. */
+export const resolveStepsTheme = (input?: StepsThemeInput): StepsTheme => ({
+  ...defaultStepsTheme,
+  ...input,
+});
+
+/**
+ * Width of the track once it has swept `progress` steps past the first one.
+ *
+ * At `progress === 0` this is exactly one slot, so the track reads as a circle
+ * behind the first dot; at `progress === 1` it spans two slots plus the gap
+ * between them, visually connecting the two steps.
+ */
+export const trackWidth = (progress: number, stepSize: number, stepGap: number) => {
+  'worklet';
+  return (progress + 1) * stepSize + progress * stepGap;
+};