Stepper#

The Stepper is a control used for performing increment and decrement actions. It allows the user to increase or decrease a value by tapping the “+” or “-” buttons. The component also supports triggering callback functions when editing starts or ends.

Properties#

1. title (Optional, String)#

• Description: Specifies the title of the stepper, typically used to describe the purpose of the stepper.
• Type: string
• Example:

  1<Stepper
  2  title="Adjust Volume" 
  3  onIncrement={handleIncrement} 
  4  onDecrement={handleDecrement} 
  5/>

2. children (Optional, VirtualNode)#

• Description: A view that describes the purpose of this stepper. Multiple child views can be used to build the appearance of the control. This property is mutually exclusive with the title property.
• Type: (VirtualNode | undefined | null | (VirtualNode | undefined | null)[])[] | VirtualNode
• Example:

  1<Stepper 
  2  onIncrement={handleIncrement} 
  3  onDecrement={handleDecrement}
  4>
  5  <Text>Adjust Volume</Text>
  6</Stepper>

3. onIncrement (Required, Callback Function)#

• Description: A function executed when the user clicks or taps the “+” button.
• Type: () => void
• Example:

  1const handleIncrement = () => {
  2  console.log("Incremented")
  3}
  4
  5<Stepper onIncrement={handleIncrement} onDecrement={handleDecrement} />

4. onDecrement (Required, Callback Function)#

• Description: A function executed when the user clicks or taps the “-” button.
• Type: () => void
• Example:

  1const handleDecrement = () => {
  2  console.log("Decremented")
  3}
  4
  5<Stepper 
  6  onIncrement={handleIncrement} 
  7  onDecrement={handleDecrement} 
  8/>

5. onEditingChanged (Optional, Callback Function)#

• Description: A function called when editing begins and ends. For example, on iOS, when the user touches and holds the increment or decrement buttons on a Stepper, it triggers the onEditingChanged callback to indicate the start and end of the editing gesture.
• Type: (value: boolean) => void
• Example:

  1const handleEditingChanged = (isEditing: boolean) => {
  2  console.log("Editing started:", isEditing)
  3}
  4
  5<Stepper
  6  onIncrement={handleIncrement}
  7  onDecrement={handleDecrement}
  8  onEditingChanged={handleEditingChanged}
  9/>

Example Code#

Here is a complete example showing how to use the Stepper component:

1const handleIncrement = () => {
2  console.log("Volume increased")
3}
4
5const handleDecrement = () => {
6  console.log("Volume decreased")
7}
8
9const handleEditingChanged = (isEditing: boolean) => {
10  console.log("Editing started:", isEditing)
11}
12
13<Stepper
14  title="Volume Control"
15  onIncrement={handleIncrement}
16  onDecrement={handleDecrement}
17  onEditingChanged={handleEditingChanged}
18/>

Notes#

• The title and children properties are mutually exclusive. You can use one or the other to describe the purpose of the stepper.
• The onEditingChanged callback is optional and only triggered when editing is supported, such as when the user long presses the buttons.

Summary#

The Stepper control provides a simple interface to increment and decrement values, with support for triggering callbacks during user interaction. You can configure the title or children properties to describe the purpose of the control, and use the onIncrement and onDecrement functions to define actions when the buttons are clicked.