├── README.md
├── index.js
├── lib
    └── NumericalTextInput.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-num-textinput
 2 | A wrapper component for TextInput that accepts only numerical values
 3 | 
 4 | ## Usage
 5 | ### Inside your parent component:
 6 | 
 7 | * Import the component:
 8 | 
 9 | ```import NumTextInput from 'react-native-num-textinput'```
10 | 
11 | * Use it like a regular TextInput.
12 | 
13 | ### Example
14 | Inside your render() method:
15 | 
16 | 
17 | ```<NumTextInput style={styles.textInputStyle}
18 |             onChangeText={(text)=> this.setState({myText:text})}
19 |             value={this.state.myText.toString()}
20 |             />```
21 | 
22 | ## License
23 | [MIT](https://opensource.org/licenses/MIT) license.
24 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import NumTextInput from "./lib/NumericalTextInput"
2 | export default NumTextInput
3 | 


--------------------------------------------------------------------------------
/lib/NumericalTextInput.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by
 3 |  * Amir Fleminger
 4 |  * July 20 2016
 5 |  * Descrption: TextInput component that receives only numerical input
 6 |  */
 7 | 
 8 | 'use strict';
 9 | import React, { Component } from 'react';
10 | import {
11 |   TextInput
12 | } from 'react-native';
13 | 
14 | module.exports = React.createClass({
15 | 	/**
16 | 	* @param String text
17 | 	* @return String cleaned String with only [0-9.-] chars
18 | 	*/
19 | 	cleanNonNumericChars(text){
20 | 		if (!text || typeof text !== 'string') {
21 | 			return ""
22 | 		}
23 | 		// Remove non numeric and non .- chars
24 | 		text = text.replace(/[^\d.-]/g, '');
25 | 		// Remove extra periods ('.', only one, at most left allowed in the string)
26 | 		let splitText = text.split('.');
27 | 		text = splitText.shift() + (splitText.length ? '.' + splitText[0].slice(0, this.props.precision) : '');
28 | 		// Remove '-' signs if there is more than one, or if it is not most left char
29 | 		for (var i=1; i< text.length; i++)
30 | 		{
31 | 	   		var char = text.substr(i,1);
32 | 	   		if(char == '-')
33 | 	   		{
34 | 	     			text = text.substr(0,i) + text.substr(i+1);
35 | 	     			// decrement value to avoid skipping character
36 | 	     			i--;
37 | 	   		}
38 | 		}
39 | 		// Remove leading zeros
40 | 		text = text.replace(/^(-)?0+(?=\d)/,'$1') //?=\d is a positive lookahead, which matches any digit 0-9
41 | 
42 | 		return text
43 | 	},
44 | 
45 | 
46 | 	getInitialState(){
47 | 		let textValue=''
48 | 		if (this.props.value) {
49 | 			textValue=this.props.value
50 | 		} else if (this.props.defaultValue) {
51 | 			textValue=this.props.defaultValue
52 | 		}
53 | 		const numValue=(textValue === '') ? NaN : parseFloat(textValue)
54 | 		return {
55 |       isFocused: false,
56 | 			textValue,
57 | 			numValue
58 | 		}
59 | 	},
60 |   focus() {
61 |     this.setState({isFocued: true})
62 |     this.refs.input.focus();
63 |   },
64 |   blur() {
65 |     this.setState({isFocued: false})
66 |     this.refs.input.blur();
67 |   },
68 |   isFocused() {
69 |     return this.state.isFocused;
70 |   },
71 | 	getDefaultProps: function() {
72 |     	return {
73 |       		precision: 3
74 |     	};
75 |   	},
76 | 
77 | 	getNumValue:function(){
78 | 		return this.state.numValue
79 | 	},
80 | 
81 | 	componentWillReceiveProps:function(nextProps){
82 | 		if(this.props.value !== nextProps.value){
83 | 			const cleanStr = this.cleanNonNumericChars(nextProps.value)
84 | 			this.setState({
85 | 				textValue: cleanStr,
86 | 				numValue: parseFloat(cleanStr)
87 | 			})
88 | 		}
89 | 	},
90 | 
91 | 	render: function(){
92 | 		var props = {...this.props, value:this.state.textValue}
93 | 		return (
94 | 			<TextInput ref="input" {...props}/>
95 | 			)
96 | 	}
97 | 
98 | });
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-num-textinput",
 3 |   "version": "1.0.2",
 4 |   "description": "A wrapper component for TextInput that accepts only numerical values",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/amirfl/react-native-num-textinput.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "native",
16 |     "react",
17 |     "textinput",
18 |     "numerical"
19 |   ],
20 |   "author": "Amir Fleminger <amirfl@yahoo.com> (http://flemingermedia.com/)",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/amirfl/react-native-num-textinput/issues"
24 |   },
25 |   "homepage": "https://github.com/amirfl/react-native-num-textinput#readme"
26 | }
27 | 


--------------------------------------------------------------------------------