React Native text input mask
We're developing program on React Native, and I have a question. How to make a text input mask for ZIP code and mobile phone number via React Native?
Here's a sample:
Check out this library. https://github.com/wix/react-native-ui-lib
(or directly this: https://github.com/wix/react-native-ui-lib#masked-input)
It allows you to render custom masked input in any format you want.
You can use it as follow: (this is an example for a phone number)
import {MaskedInput} from 'react-native-ui-lib'
// in your render...
<MaskedInput
renderMaskedText={this.renderMaskedInput}
caretHidden
keyboardType={'numeric'}
/>
renderMaskedInput(value) {
return (
<View>
<Text>
{value.substr(0, 3)} - {value.substr(3, 10)}
<Text>
<View>
);
}
Comments
Post a Comment