How to control the mask of an input?

Question

I have an API that returns the mask of an input based on the country code. What I still need to do is a function that dynamically formats the input as the user types.

For example, the user selects the code +55 and I get that the input mask will be (##)####-####, how can I format the input from the mask?

I tried downloading some libraries but most use the mask in the form of a regex, and that's not how I get it from my api.

Answer 1

If you take this library for example https://github.com/CaioQuirinoMedeiros/react-native-mask-input You can create mask for it like:

import { formatWithMask } from 'react-native-mask-input'

const dataFromBackend = '(##)####-####'
const phoneMask = dataFromBackend.split('').map(item => item === '#' ? /\d/ : item)

const { masked, unmasked, obfuscated } = formatWithMask({
  text: '71680345',
  mask: phoneMask,
});