Stepper

A +/- counter with clamped bounds, a haptic on every tap, and a quick pop on the number when it changes.

ReanimatedHapticsNativeWindSource

Prerequisites

The stepper only needs icons, haptics, and Reanimated.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-haptics react-native-reanimated

Install


npx @rslab/cli add stepper

Usage

import { Stepper } from '@/components/ui/Stepper';

const [qty, setQty] = useState(1);

<Stepper value={qty} onChange={setQty} min={1} max={10} />;

Bound it to whatever range and increment the field needs:

<Stepper
  value={guests}

  onChange={setGuests}

  min={0}

  max={8}

  step={2}

  disabled={soldOut}
/>

Props

PropTypeDefault

value

number

-

The current count. Controlled.

onChange

(value: number) => void

-

Called with the clamped next value on every tap.

min?

number

-Infinity

max?

number

Infinity

step?

number

1

Amount added or subtracted per tap.

disabled?

boolean

false

Fades the whole pill and blocks both buttons.

haptic?

boolean

true

Light haptic tick on a tap that actually changes the value.

className?

string

-

Extend or override the outer pill.

How it works

Bounds decide disabled, not the other way around. atMin/atMax are derived straight from value, min, and max, so the +/- buttons fade and stop responding the instant you hit either edge, with no separate state to keep in sync.
The number rises, it doesn't pop. The digit sits in a fixed-height, overflow-hidden row; on change, the new value starts translated down and transparent, then animates up to rest, clipped by the container so it genuinely looks like it's rising into place. It uses withTiming rather than a spring on purpose: a stepper gets tapped repeatedly and fast, and spring overshoot on every tap gets old quickly.
Haptic fires only on an actual change. The change handler bails out before the haptic and the callback if the clamped result equals the current value, so mashing "+" at max doesn't buzz for nothing.

Tuning

The 12px starting offset and 160ms duration in the entrance animation, how far the number travels and how long it takes to settle.
The row's fixed height, it needs to stay tall enough for the digits' line height, or the clip cuts them off even at rest.
Swap the +/- Hugeicons pair for any other icons if they don't fit your context.

See exactly how this works with an RSLAB subscription.

Get Pro

Stepper

Prerequisites

Install

Usage

Props

On this page