rn-masked-text-input
v1.3.1
Published
🎭 Always on masked text input React Native component.
Downloads
78
Readme
react-native-text-input-mask
🎭 Always on masked text input React Native component.
Installation
npm install rn-masked-text-input --save
Usage
import { MaskedTextInput } from 'react-native-text-input-mask';
const myComponent = () => {
return (
<View>
<MaskedTextInput
placeholder="Try something…"
keyboardType="numeric"
secureTextEntry={false}
maskType="phone"
style={styles.input}
/>
</View>
);
}
Props
| Name | Type | Description | | ---- | ---- | ----------- | | value | String | Initial value for the mask | | maskType | String | Type of mask to apply. See supported mask types. | customMask | Mask | Instance of custom configured mask. See the Custom Mask section to create a new one.
Note: All the other properties from native TextInput
are supported. Check the React Native TextInput component reference for futher information.
Methods
.getValue()
Returns raw(unmasked) value string.
.validate()
Return a boolean telling if current state value of the input is valid against the mask validator
prop function.
.clear()
Clears the value of the component.
.focus()
Native focus on TextInput component.
.blur()
Native blur on TextInput component.
Creating a mask
0
Represents any digit.
[A-Z]
Represents any alphabetic letter.
?
Says that the previous character is optional. In that case the _(underscore)
will only show up when the user input the minimun size of characters. For example: A mask as (000?) 0
will be initialized as (__) _
and when user input the minimun 3 digits it will display the optional(s) like (00_) 0
.
Special characters different from underscores
will be displayed as separators or as it is, like spaces.
Supported Mask Types
Currently supported mask types are: phone, cpf, cnpj, date, money
Custom Mask
import { MaskedTextInput, CustomMask } from 'react-native-text-input-mask';
const myComponent = () => {
const myCustomMask = new CustomMask({
name: 'myCustomMask',
mask: '(000) 000-000',
validator: value => value === '123456789',
});
return (
<View>
<MaskedTextInput customMask={myCustomMask} keyboardType="numeric" />
</View>
);
}
Examples
See the examples/RNTextInputMaskPlayground
app and play with it.