NumberInput

NumberInput provides a numeric input field with increment and decrement buttons. Use for quantities, scores, or any bounded numeric values.

Preview

QUANTITY

Basic Usage

const [value, setValue] = useState(5);

<NumberInput
  value={value}
  onValueChange={setValue}
  accessibilityLabel="Quantity"
/>

Sizes

<NumberInput size="sm" value={value} onValueChange={setValue} accessibilityLabel="Small" />
<NumberInput size="md" value={value} onValueChange={setValue} accessibilityLabel="Medium" />
<NumberInput size="lg" value={value} onValueChange={setValue} accessibilityLabel="Large" />

With Label

NUMBER OF COINS

<NumberInput
  label="Number of Coins"
  value={coins}
  onValueChange={setCoins}
  min={1}
  max={6}
  accessibilityLabel="Number of coins"
/>

Min/Max Bounds

RATING (1-5)

<NumberInput
  label="Rating (1-5)"
  value={rating}
  onValueChange={setRating}
  min={1}
  max={5}
  accessibilityLabel="Rating"
/>

Custom Step

AMOUNT (STEP: 10)

<NumberInput
  label="Amount (step: 10)"
  value={amount}
  onValueChange={setAmount}
  step={10}
  min={0}
  max={100}
  accessibilityLabel="Amount"
/>

Disabled State

LOCKED VALUE

<NumberInput
  label="Locked Value"
  value={6}
  onValueChange={() => {}}
  disabled
  accessibilityLabel="Locked value"
/>

API Reference

NumberInput Props

Prop	Type	Default	Description
`value`	`number`	Required	Current value
`onValueChange`	`(value: number) => void`	Required	Change handler
`min`	`number`	`0`	Minimum value
`max`	`number`	`Infinity`	Maximum value
`step`	`number`	`1`	Step increment
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size
`disabled`	`boolean`	`false`	Disabled state
`label`	`string`	-	Label above input
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	Required	Screen reader label

Complete Example

import { NumberInput, Card, Button, Text } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function CoinCastingSetup() {
  const [coinCount, setCoinCount] = useState(3);
  const [throwCount, setThrowCount] = useState(6);
  const [speed, setSpeed] = useState(50);

  const handleStartCasting = () => {
    startCasting({
      coins: coinCount,
      throws: throwCount,
      animationSpeed: speed,
    });
  };

  return (
    <View style={styles.container}>
      <Card style={styles.card}>
        <Text style={styles.title}>Casting Settings</Text>

        <View style={styles.inputGroup}>
          <NumberInput
            label="Number of Coins"
            value={coinCount}
            onValueChange={setCoinCount}
            min={1}
            max={6}
            accessibilityLabel="Number of coins to throw"
          />
        </View>

        <View style={styles.inputGroup}>
          <NumberInput
            label="Number of Throws"
            value={throwCount}
            onValueChange={setThrowCount}
            min={1}
            max={12}
            accessibilityLabel="Number of throws"
          />
        </View>

        <View style={styles.inputGroup}>
          <NumberInput
            label="Animation Speed"
            value={speed}
            onValueChange={setSpeed}
            min={10}
            max={100}
            step={10}
            accessibilityLabel="Animation speed percentage"
          />
        </View>

        <Button onPress={handleStartCasting}>
          Start Casting
        </Button>
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  card: {
    padding: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 24,
  },
  inputGroup: {
    marginBottom: 20,
  },
});