/ Lable

A stepper with a sliding label in the middle with react native

A stepper with a sliding label in the middle with react native

react-native-number-stepper

A stepper with a sliding label in the middle. Pan the label or tap the buttons.

Number-Stepper

📖 Getting started

$ npm install react-native-number-stepper --save

💻 Usage

import { RNNumberStepper } from 'react-native-number-stepper';

💡 Props

Prop Type Default Note
size number 1 Specify the size of stepper
width number 150 Specify the width of stepper
height number 35 Specify the height of stepper
value array 0 Specify the default value fo stepper
minValue number 0 Specify the minimum value limit of stepper
maxValue number 10 Specify the maximum value limit of stepper
stepValue number 1 Specify the incremental value of stepper
autoRepeat string true Specify the auto repeat flag value
leftButtonText string - Specify the left button display text
rightButtonText string + Specify the right button display text
buttonsTextColor string #FFFFFFFF Specify the button text color
buttonsBackgroundColor string #357FC0 Specify the buttons background color
labelTextColor string #FFFFFF Specify the label text color
labelBackgroundColor string #4098E0 Specify the label background color
buttonsContainerWidth number 50 Specify the buttons container width
cornorRadius number 8 Specify the cornor radius value
borderWidth number 0 Specify the border width of stepper
borderColor string #FFFFFF Specify the border color of stepper
onChange func Specify function for the onChange event listener

GitHub