StepIndicator

(A) One-Line Summary

StepIndicator displays the current position within a multi-step flow using a "dot strip" visualization.
It shows the current step via activeStep (0-based), and when interactive=true, users can tap specific dots to trigger step navigation.

(B) Installation (Track A / Track B)

Prerequisite: Import the unistyles side-effect in your app entry file.

• Track A: import '@fleet-ui/local/core/unistyles';
• Track B: import '@fleet-ui/core/unistyles';

Track A (CLI / local install)

pnpm dlx @fleet-ui/cli add StepIndicator

import { StepIndicator } from '@fleet-ui/local/components';

Track B (NPM package)

import { StepIndicator } from '@fleet-ui/components';

Required Dependencies

StepIndicator uses Reanimated for animations.

pnpm add react-native-reanimated react-native-unistyles

(D) Core Features & Usage

D-1. Basic Usage

import { StepIndicator } from '@fleet-ui/components';
 
export function Example() {
  return <StepIndicator step={5} activeStep={2} />;
}

D-2. Interactive Mode

import { useState } from 'react';
import { StepIndicator } from '@fleet-ui/components';
 
export function Example() {
  const [active, setActive] = useState(0);
 
  return (
    <StepIndicator
      step={5}
      activeStep={active}
      interactive
      onStepChange={setActive}
      onStepPress={(i) => console.log('pressed', i)}
    />
  );
}

(E) Internal State / Shared Value / Animation

E-1. State Model

• step is clamped to the range 1–100.
• activeStep is clamped to the range 0–(step-1).
• Controlled vs. Uncontrolled:
  • Controlled: Provide activeStep
  • Uncontrolled: Use defaultActiveStep to initialize internal state; interactive mode updates internal state automatically

E-2. Reanimated / Shared Value

• Uses activeStepSV (SharedValue<number>) to synchronize the current step with animations.
• Each dot calculates derived values:
  • isActive: whether it's the current step
  • isCompleted: whether it precedes the current step
• The active dot expands in width (pill-like), and fill opacity transitions to 1 for active/completed states.

(F) Accessibility

• Root element: accessibilityRole="progressbar"
• accessibilityValue: { min: 0, max: step-1, now: activeStep }
• Default accessibilityLabel: Step {activeStep+1} of {step}

When interactive:

• Each dot has accessibilityRole="button" and uses accessibilityState.selected to convey selection status.

(G) Props Table

Reference: StepIndicatorProps from packages/components/src/StepIndicator/StepIndicator.types.ts.