Description:
A simple and effective Text Input with custom mask for ReactNative. Works on iOS and Android.
Basic usage:
1. Install and import.
# Yarn
$ yarn add react-native-mask-input
# NPM
$ npm i react-native-mask-input
import MaskInput from ‘react-native-mask-input’;
2. Apply a custom input mask using Regex.
function MyComponent() {
const [phone, setPhone] = React.useState('');
return (
<MaskInput
value={phone}
onChangeValue={(masked, unmasked, obfuscated) => {
setPhone(masked); // you can use the unmasked value as well
// assuming you typed "9" all the way:
console.log(masked); // (99) 99999-9999
console.log(unmasked); // 99999999999
console.log(obfuscated); // (99) 99999-9999 (there's no obfuscation on this mask example)
}}
mask={[
'(',
/\d/, // that's because I want it to be a digit (0-9)
/\d/,
')',
' ',
/\d/,
/\d/,
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
/\d/,
/\d/,
]}
/>
);
}3. Available component props.
- mask: An array where each item defines one character of the value
- value: Required input value
- onChangeText: onChange function
- placeholderFillCharacter: Custom placeholder fill character
- obfuscationCharacter: Character to be used on the obfuscated characters
- showObfuscatedValue: Show obfuscated values
Preview:
