How set 9 as require digit in mask?
erokhovama opened this issue · comments
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'}
/>
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)}
/>