react-native-masked-text
This is a simple masked text (normal text and input text) component for React-Native.
Supported Versions
React-native: 0.32.0 or higher
Install
npm install react-native-masked-text --save
Usage (TextInputMask)
For all the masks you will use in this way:
import TextInputMask from 'react-native-masked-text' //... <TextInputMask = = // "value" "onChangeText" = =/>
Cel Phone
Mask:
- BRL (default):
(99) 9999-9999
or(99) 99999-9999
(will detect automatically) - INTERNATIONAL:
+999 999 999 999
If you need a different formatting, use the Custom
mask =).
Sample code (source):
<TextInputMask = = = =/>
Options
name | type | required | default | description |
---|---|---|---|---|
maskType | string | no | maskType |
the type of the mask to use. Available: BRL or INTERNATIONAL |
withDDD | boolean | no | true |
if the mask type is BRL , include the DDD |
dddMask | string | no | (99) |
if the mask type is BRL , the DDD mask |
Methods
You can get the unmasked
value using the getRawValue
method:
<TextInputMask = = = = // =/> //... const unmasked = thisphoneField// in the mask: (51) 98765-4321// unmasked: 51987654321
CPF
Mask: 999.999.999-99
Sample code (source):
<TextInputMask = = =/>
Methods
You can check if the cpf is valid by calling the isValid()
method:
<TextInputMask = = = // =/> // get the validation const cpfIsValid = thiscpfFieldconsole // boolean
You can get the unmasked
cpf calling the getRawValue
method:
const unmasked = thiscpfField// in the mask: 123.456.789-01// unmasked: 12345678901
CNPJ
Mask: 99.999.999/9999-99
Sample code (source):
<TextInputMask = = =/>
Methods
You can check if the cnpj is valid by calling the isValid()
method:
<TextInputMask = = = // =/> // get the validation const cnpjIsValid = thiscnpjFieldconsole // boolean
You can get the unmasked
cpf calling the getRawValue
method:
const unmasked = thiscnpjField// in the mask: 99.999.999/9999-99// unmasked: 99999999999999
Credit Card
Mask:
- visa or master:
9999 9999 9999 9999
or9999 **** **** 9999
(obfuscated) - amex:
9999 999999 99999
or9999 ****** 99999
(obfuscated) - diners:
9999 999999 9999
or9999 ****** 9999
(obfuscated)
Sample code (source)
<TextInputMask = = = =/>
Options
name | type | required | default | description |
---|---|---|---|---|
obfuscated | boolean | no | false |
if the mask should be obfuscated or not |
issuer | string | no | visa-or-mastercard |
the type of the card mask. The options are: visa-or-mastercard , amex or diners |
Methods
You can get the array containing the groups of the value value using the getRawValue
method:
<TextInputMask = = = = // =/> //... const unmasked = thiscreditCardField// in the mask: 9874 6541 3210 9874// unmasked: [9874, 6541, 3210, 9874]
Custom
Mask: defined by pattern
9
- accept digit.A
- accept alpha.S
- accept alphanumeric.*
- accept all, EXCEPT white space.
Ex: AAA-9999
Sample code (source):
//// SIMPLE// <TextInputMask = = = = =/> //// ADVANCED// <TextInputMask = = = = =/>
Options
name | type | required | default | description |
---|---|---|---|---|
mask | string | YES | The mask pattern | |
validator | function | no | function that returns true |
the function that's validate the value in the mask |
getRawValue | function | no | return current value | function to parsed value (like unmasked or converted) |
translation | object (map{string,function}) | no | 9 - digit , A - alpha , S - alphanumeric , * - all, except space |
The translator to use in the pattern |
Datetime
Mask:
DD/MM/YYYY HH:mm:ss
DD/MM/YYYY
MM/DD/YYYY
YYYY/MM/DD
HH:mm:ss
HH:mm
HH
You can use -
instead of /
if you want.
Sample code (source):
<TextInputMask = = = =/>
Options
name | type | required | default | description |
---|---|---|---|---|
format | string | YES | The date format to be validated |
Methods
You can check if the date is valid by calling the isValid()
method:
<TextInputMask = = = = // =/> // get the validation const isValid = thisdatetimeFieldconsole // boolean
You can get the moment object from the date if it's valid calling the getRawValue
method:
const momentDate = thisdatetimeField
Money
Mask: R$999,99
(fully customizable)
Sample code (source):
// SIMPLE<TextInputMask = = =/> // ADVANCED<TextInputMask = = = =/>
Options
name | type | required | default | description |
---|---|---|---|---|
precision | number | no | 2 |
The number of cents to show |
separator | string | no | , |
The cents separator |
delimiter | string | no | . |
The thousand separator |
unit | string | no | R$ |
The prefix text |
suffixUnit | string | no | '' |
The sufix text |
Methods
You can get the number
value of the mask calling the getRawValue
method:
<TextInputMask = = = // =/> const numberValue = thismoneyFieldconsole // Number // CAUTION: the javascript do not support giant numbers.// so, if you have a big number in this mask, you could have problems with the value...
Only Numbers
Mask: accept only numbers
Sample code (source):
<TextInputMask = = =/>
Zip Code
Mask: 99999-999
Sample code (source):
<TextInputMask = = =/>
Methods
You can get the unmasked
value using the getRawValue
method:
<TextInputMask = = = // =/> //... const unmasked = thiszipCodeField// in the mask: 98765-321// unmasked: 98765321
... Utils
rawText
in onChangeText
[1.12.0+]
Including the If you need the raw value in every text change, you can use the includeRawValueInChangeText
.
It will provide the masked and the raw text in every text change.
<TextInputMask = = = =/>
TextInput
instance
Getting the If you want to get the TextInput
raw component, use the getElement()
method:
<TextInputMask = = = // =/> //... const textInput = thiszipCodeField
Blocking user to add character
If you want, you can block a value to be added to the text using the checkText
prop:
<TextInputMask //... /** * @ . * @ . * @ . */ =/>
Using custom text inputs
You can use this prop if you want custom text input instead native TextInput component:
const Textfield = MKTextField ; <TextInputMask // ... // = // =/>
About the normal text input props
You can use all the normal TextInput props from React-Native, with this in mind:
- onChangeText is intercepted by component.
- value is intercepted by component.
- if you pass keyboardType, it will override the keyboardType of masked component.
Code Samples
If you want, you can check the code samples in this repo:
react-native-masked-text-samples
Usage (TextMask)
import React Component from 'react' // import the componentimport TextMask from 'react-native-masked-text' { thisstate = text: '4567123409871234' } { // the type is required but options is required only for some specific types. // the sample below will output 4567 **** **** 1234 return <TextMask = = = /> }
Props
The same of TextInputMask, but for React-Native Text component instead TextInput.
Warning: if the value not match the mask, it will not appear.
Methods
getElement()
: return the instance of Text component.
Extra (MaskService)
If you want, we expose the MaskService
. You can use it:
Methods
- static toMask(type, value, settings): mask a value.
type
(String, required): the type of the mask (cpf
,datetime
, etc...)value
(String, required): the value to be maskedsettings
(Object, optional): if the mask type accepts options, pass it in the settings parameter
- static toRawValue(type, maskedValue, settings): get the raw value of a masked value.
type
(String, required): the type of the mask (cpf
,datetime
, etc...)maskedValue
(String, required): the masked value to be converted in raw valuesettings
(Object, optional): if the mask type accepts options, pass it in the settings parameter
- static isValid(type, value, settings): validate if the mask and the value match.
type
(String, required): the type of the mask (cpf
,datetime
, etc...)value
(String, required): the value to be maskedsettings
(Object, optional): if the mask type accepts options, pass it in the settings parameter
- static getMask(type, value, settings): get the mask used to mask the value
Ex:
import MaskService from 'react-native-masked-text' var money = MaskService // money -> US$ 1.23
Throubleshooting
- If the
es2015
error throw by babel, try runreact-native start --reset-cache
Changelog
View changelog HERE
Thanks to
-
Thanks to vanilla-masker =).
-
Thanks to moment =).