rn-number-input's Introduction

rn-number-input

Created as an alternative to the native Picker component, rn-number-input is the number equivalent of <TextInput /> and behaves and looks very similar to what you see on the web <input type='number' />.

Screenshot of <NumberInput />

Installation

rn-number-input requires react-native 0.20 or later.

npm install --save rn-number-input

Example

To build the example locally, clone this repo then run:

cd example
npm install
react-native (run-ios|run-android)

Usage

import React from 'react-native';
import NumberInput from 'rn-number-input';

<NumberInput
	value={this.state.chickenWings}
	min={-10}
	max={10}
	onChange={(value) => this.setState({ chickenWings: value })}
	arrowColour='blue'
	width={70}
	height={40}
/>

Available Props

<NumberInput /> exposes all the props available to the <TextInput /> plus the following below:

Property	Type	Default	Description
step	number	1	amount in which the value is increased or decreased
value	string or number	0	value shown of the input
width	number	70	specifies the width of the component
height	number	40	specifies the height of the component
arrowColour	string	#333 (dark grey)	`tintColor` for the arrow icon
arrowStyle	style	[default styles]	specifies the style for each arrow button
valueStyle	style	[default styles]	specifies the style for value within the input
min	number	0	specifies the min value
max	number	100	specifies the max value
decimalPoints	number	2	how many decimal points that the value round's to
onChange	func (required)	undefined	function is called when the value is changed
editable	boolean	true	whether the input can be edited directly using the keypad