bhrott / react-native-masked-text

A pure javascript masked text and input text component for React-Native.
MIT License
1.61k stars 249 forks source link

How set 9 as require digit in mask? #252

Open erokhovama opened 3 years ago

erokhovama commented 3 years ago

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'} />

kommandantee commented 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)}
          />