How to put two masks in 1 input

[MatheusFC2]

In my case, I want to put a CPF and CNPJ mask in 1 input

When the person adds a number more than 11 digits, the mask turns into cpnj

I tried to add 2 mask types

`
export default function App() {

    const [cpf, setCpf] = useState('');
  
    return (
      <View style={styles.container}>
        <TextInputMask 
          style={styles.input}
          
          type={'cpf', 'cpnj'}
          
  
          value={cpf}
          onChangeText={text => setCpf(text)}
        />
  
      </View>
    );
}

`

I wanted help on how I could create this code

Sorry my english i'm from brazil

[ederhmaia]

First of all you need hook the useState when you want component updates. In this case you wanna update the state of the attribute type (type="cpf" // type="cnpj") according to the character length. You can pass 'cpf' as the initial value, because has less characters and will be the first option to check.

const [inputMask, setInputMask] = useState('cpf')

Then, in the component when onChangeText event is fired, the setInputMask function is called passing cpf or cnpj (depending on text length) as an argument, which will be the value of inputMask

<TextInputMask
         placeholder="CPF/CNPJ"
         type={inputMask}
         onChangeText={(text) => {
               setInputMask(text?.length >= 14 ? 'cnpj' : 'cpf')
          }}
/>