Stepper

Stepper, a React Native component for iOS, Android and web: A number changed in steps.

Usage

import { useState } from 'react';
import { Stepper } from './components/ui/stepper';

export default function Example() {
  const [minutes, setMinutes] = useState(25);
  return <Stepper label="Focus length" value={minutes} onValueChange={setMinutes} min={5} max={60} step={5} unit="min" />;
}

Props

PropTypeDefaultDescription
labelstring
valuenumber
onValueChange(value: number) => void
minnumber0
maxnumberNumber.MAX_SAFE_INTEGER
stepnumber1
unitstringShown beside the value and read with it, like `min`.
styleStyleProp<ViewStyle>
testIDstring