/react-native-input-spinner

An extensible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

NPM version npm Package Quality js-prittier-style Compatibility

NPM

If this project has helped you out, please support us with a star 🌟

📘 Description

Author: Marco Cesarato

Github: https://github.com/marcocesarato/react-native-input-spinner

An extendible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.

Compatible with: Android, iOS, Windows, Web and Expo.

📖 Install

Install the library from npm or yarn just running one of the following command lines:

npm yarn
npm install react-native-input-spinner --save yarn add react-native-input-spinner

💻 Usage

import InputSpinner from "react-native-input-spinner";

// Example
<InputSpinner
	max={10}
	min={2}
	step={2}
	colorMax={"#f04048"}
	colorMin={"#40c5f4"}
	value={this.state.number}
	onChange={(num) => {
		console.log(num);
	}}
/>;

For more examples check the Example directory the App.js file

🎨 Screenshots

Default props + Min & Max colors Not rounded, showBorder, Min & Max colors

High customization

⚡️ Run example

Clone or download repo and after:

cd Example
yarn install # or npm install
expo start

Open Expo Client on your device. Use it to scan the QR code printed by expo start. You may have to wait a minute while your project bundles and loads for the first time.

Example app

💡 Props

Check the "Props List" file to have the complete list of component props ordered by name.

Structure

Handlers

Handler Description Func
onChange Get the number of the Spinner (num) => { ... }
onMax When max is reached get max number permitted (max) => { ... }
onMin When min is reached get min number permitted (min) => { ... }
onIncrease When increase button is clicked get value increased (increased) => { ... }
onDecrease When decrease button is clicked get value decreased (decreased) => { ... }

Props

Property Description Type Default Note
value Controlled value of the Spinner String
Number
0
type Type of spinner String int Can be int or real/float...
step Value to increment or decrement the current spinner value String
Number
1
max Max number permitted String
Number
0
min Min value permitted String
Number
99
precision Max numbers permitted after comma Integer 2
disabled Disable the Spinner or not Boolean false
editable Set if input number field is editable or not Boolean true
prepend Custom element after left button Component
append Custom element before right button Component

Screenshots

Description
  • Top spinner with a child
  • Bottom spinner with prepend and append

Props Styles

Property Description Type Default Note
style Container style Object Could overwrite other props
inputStyle Text Input style Object Could overwrite other props
buttonStyle Button style Object Could overwrite other props
buttonPressStyle Button style on Pressed state Object Could overwrite other props

Props Colors

Property Description Type Default Note
background Custom input text background color String transparent
textColor Custom input text number color String #000000
color Custom color of the Spinner String #3E525F
colorPress Custom color of the Spinner button on touch press String #3E525F
colorRight Custom color of the Spinner right button String #3E525F
colorLeft Custom color of the Spinner left button String #3E525F
colorMin Custom color of the Spinner when reach min value String
colorMax Custom color of the Spinner when reach max value String
buttonTextColor Custom color of the labels's button of the Spinner String #FFFFFF
buttonPressTextColor Custom color of the button of the Spinner on Pressed state String #FFFFFF

Screenshots

Description
  • Spinner with color, buttonTextColor, colorPress and buttonPressTextColor custom colors

Props Container Style

Property Description Type Default Note
style Container style Object Could overwrite other props
width Custom width of the Spinner Number 150
height Custom height of the Spinner Number 50
showBorder Show the border of the Spinner or not Boolean false Use with rounded={false}

Props Buttons Style

Property Description Type Default Note
buttonStyle Button Style (Plus and Minus buttons) Object
arrows Labels on button will be (< and >) instead of (+ and -) Boolean false
rounded Use circular button Boolean true
activeOpacity Opacity of underlay on pressed button Number 0.85
buttonLeftDisabled Disable left button Boolean false
buttonRightDisabled Disable right button Boolean false
buttonLeftText Custom text on the button left of the spinner String
buttonRightText Custom text on the button right of the spinner String
buttonLeftImage Custom element on the button left of the spinner Component Could overwrite other props
buttonRightImage Custom element on the button right of the spinner Component Could overwrite other props
buttonPressLeftImage Custom element on the button left of the spinner on pressed state Component Could overwrite other props
buttonPressRightImage Custom element on the button right of the spinner on pressed state Component Could overwrite other props
buttonFontSize Custom fontSize of buttons of the Spinner Number 14
buttonFontFamily Custom fontFamily of buttons of the Spinner String System Default
buttonTextColor Custom color of the labels's button of the Spinner String #FFFFFF
buttonPressStyle Button Style on Pressed state (Plus and Minus buttons) Object
buttonPressTextColor Custom color of the button of the Spinner on Pressed state String #FFFFFF

Props Text Input Style

Property Description Type Default Note
inputStyle Text Input style Object Can overwrite other props
textColor Custom input text number color String #000000
background Custom input text background color String transparent
fontSize Custom fontSize of the text input of the Spinner Number 14
fontFamily Custom fontFamily of the text input of the Spinner String System Default

🤔 How to contribute

Have an idea? Found a bug? Please raise to ISSUES. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.