Tcomb-form-native: Mask for number input

[sibelius]

Is it possible to define a mask to a number input?

I would like to provide a currency and a phone number mask for some inputs

[alvaromb]

Yes, you should define your custom templates: https://github.com/gcanti/tcomb-form-native#templates

Inside your template you can change what's actually displayed.

[alvaromb]

Please let me know if you need further help to build your template.

[sibelius]

figure it out:

https://gist.github.com/sibelius/c564ded5bfd39534cf035e0460f2ee9a

using https://github.com/benhurott/react-native-masked-text

[vivekmago]

I am trying to use this for cel-phone masking and it works great for display and editing but validation always fails. I have the field defined as t.Number on which I apply this mask. Help appreciated

[awojtczyk]

@vivekmago Not sure if I did it on right way, but I wanted to have something like exactly "999-999-999" mask.
So, to handle the validation, I'm using following code:

const formOptions = {
  stylesheet: appstyle,
  auto: 'none',
  fields: {
    phone: {
      keyboardType:'numeric',
      error: 'Please, provide correct phone number',
      placeholderTextColor: 'rgba(255,255,255,0.5)',
      placeholder: '123-456-789',
      template: PhoneMask
    },
  },
};

+

const Phone = t.subtype(t.String, (phone) => {
  const reg = /^\d{3}-\d{3}-\d{3}$/;
  return reg.test(phone);
});


let Form = t.form.Form;
let Login = t.struct({
  phone: t.Number,
  phone2:Phone
});