0.0.2 • Published 10 years ago
rn-number-input v0.0.2
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-inputExample
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 |
Todo
- Add Unit Tests
License
MIT Licensed Copyright (c) Cameron Bourke 2016