How to implement input text masking in React-Native?

Question

The mask is needed: 90.99%, where: 9 - optional digit 0 - required %,. - relevant characters '%' and '.'

For example: Input / Result

1 ---> 1%
12 ---> 12%
12.1 ---> 12.1%
12.12 ---> 12.12%

I'm using redux-form

I've tried react-native-text-input-mask and react-native-masked-text already, however, there is no similar functionality in these packages (in the first one there is something similar, but '%' is correctly displayed only if it is used before the number but this char should be after)

score 0 · Answer 1 · answered Dec 04 '19 at 11:30

The best way here is to provide masking next to the input itself. It highly depends on how do you use the Field component (do you even use it?).

You can try to use the format prop on the Field.

Or you can provide your own component to render a field and provide own format functionality:

const renderPercentagedInput = (field) => {
  function onChange(evt) {
    const value = evt.target.value;
    const numbers = value.replace(/[^0-9.,]/g, '')
    field.input.onChange(numbers + '%')
  }

  return (
    <TextInput
      {...field.input}
      onChangeText={onChange}
    />
  );
}

How to implement input text masking in React-Native?

1 Answers1