Open erokhovama opened 3 years ago
You can use mask service as,
import { MaskService } from 'react-native-masked-text';
and with Mask Service
const [phone, setPhone] = React.useState<string>();
const maskPhone = (phone) => {
var maskedPhone = MaskService.toMask('custom', phone, {
mask: '+7 (9**) *** ** **',
translation: {
// this is a custom translation. The others (9, A, S, *) still works.
// this translation will be merged and turns into 9, A, S, *, #.
'#': function(val) {
if (val === ' ') {
return val;
}
return null;
},
'9': function(val) {
return [' ', '#', ',', '.', '!'].indexOf(val) >= 0 ? val : null;
},
}
});
console.log(maskedPhone);
setPhone(maskedPhone);
}
After that you can use this function in a component whatever you want as,
<Input
style={styles.formInput}
textStyle={{
fontSize: 16
}}
placeholder='Phone Number'
keyboardType="phone-pad"
value={phone}
onChangeText={val => maskPhone(val)}
/>
I use react-native-masked-text. I made custom mask for Russian phone number - '+7 (999) 999-99-99'. All is cool, but I need that first digit 9 will be require digit and user can't put other digit after 7. How can I do it?
My code:
<TextInputMask type={'custom'} options={{ mask: '+7 (999) 999-99-99' }} value={text} onChangeText={(text) => onEdit(text)} style={styles.text} editable={editable} clearButtonMode={editable ? 'always' : 'never'} />