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


/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/MaskedInput.js');
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-masked-input",
 3 |   "version": "1.0.3",
 4 |   "description": "A masked input for React Native",
 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/fbonesso/react-native-masked-input.git"
12 |   },
13 |   "dependencies": {
14 |   	"prop-types": "^15.5.10",
15 | 	"create-react-class": "15.6.0"
16 |   },
17 |   "keywords": [
18 |     "react",
19 |     "react",
20 |     "native",
21 |     "input",
22 |     "mask",
23 |     "masked",
24 |     "format",
25 |     "text",
26 |     "input"
27 |   ],
28 |   "author": "Felipe Bonesso",
29 |   "license": "ISC",
30 |   "bugs": {
31 |     "url": "https://github.com/fbonesso/react-native-masked-input/issues"
32 |   },
33 |   "homepage": "https://github.com/fbonesso/react-native-masked-input#readme"
34 | }
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-masked-input  [![NPM version](https://img.shields.io/npm/v/react-native-masked-input.svg?style=flat-square)](https://www.npmjs.com/package/react-native-masked-input)
 2 | 
 3 | ## Install
 4 | 
 5 | `npm install react-native-masked-input@latest --save`
 6 | 
 7 | ## Usage
 8 | 
 9 | All you need is to `require` the `react-native-masked-input` module and then use the
10 | `<MaskedInput />` tag.
11 | 
12 | ```javascript
13 | import MaskedInput from 'react-native-masked-input';
14 | 
15 | <MaskedInput maskType="money" currencySymbol="$" currencySeparator="," />
16 | ```
17 | 
18 | ## Props
19 | 
20 | | Prop | Type | Description | Values |
21 | |---|---|---|---|
22 | |**`maskType`**|String|Type of masked input.|`['phone', 'money']`|
23 | |**`currencySymbol`**|String|Currency symbol when money.|`['$', 'R$', '€', '£']`|
24 | |**`currencySeparator`**|String|Currency separator|`['.', ',']`|
25 | 
26 | ## Roadmap
27 | - [ ] Decimal
28 | - [ ] Zipcode
29 | - [ ] Locales
30 | 


--------------------------------------------------------------------------------
/lib/MaskedInput.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var React = require('react');
 4 | var {
 5 |     View,
 6 |     TextInput
 7 | } = require('react-native');
 8 | 
 9 | const PropTypes = require('prop-types');
10 | var createReactClass = require('create-react-class');
11 | 
12 | var MaskedInput = createReactClass({
13 |     propTypes: {
14 |         style: PropTypes.oneOfType([
15 | 			PropTypes.number,
16 | 			PropTypes.shape({})
17 | 		]),
18 |         maskType: PropTypes.string,
19 |         currencySymbol: PropTypes.string,
20 |         currencySeparator: PropTypes.string
21 |     },
22 | 
23 |     getInitialState() {
24 |       return {
25 |         value: this.props.value?this.props.value:""
26 |       };
27 |     },
28 | 
29 |     _onChangeText(value) {
30 |       value = value.split(this.props.currencySymbol).join("");
31 | 
32 |       if (value != "") {
33 |         if (this.props.maskType == "money") {
34 |           value = value.replace(/\D/g, "");
35 | 
36 |           value = this.props.currencySymbol + value.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1" + this.props.currencySeparator);
37 |         }
38 | 
39 |         if (this.props.maskType == "phone") {
40 |           if (value.length < 15) {
41 |               value = value.replace(/\D/g, "");
42 |               value = value.replace(/^(\d\d)(\d)/g, "($1) $2");
43 |               value = value.replace(/(\d{4})(\d)/, "$1-$2");
44 |           }
45 |           else if (value.length == 15) {
46 |               value = value.replace(/\D/g, "");
47 |               value = value.replace(/^(\d\d)(\d)/g, "($1) $2");
48 |               value = value.replace(/(\d{5})(\d)/, "$1-$2");
49 |           }
50 |           else {
51 |               value = value.substring(0, value.length - 1);
52 |           }
53 |         }
54 | 		if (this.props.onChangeValue){this.props.onChangeValue(value);}
55 |       }
56 | 
57 |       this.setState({value: value});
58 |     },
59 | 
60 |     render() {
61 |         const defaultStyles = {
62 |           padding:10
63 |         };
64 | 
65 |         return (
66 |             <TextInput
67 |               {...this.props}
68 |               value={this.state.value}
69 |               style={this.props.style?this.props.style:defaultStyles}
70 |               onChangeText={(value) => this._onChangeText(value)}
71 |             />
72 |         );
73 |     }
74 | });
75 | 
76 | module.exports = MaskedInput;
77 | 


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