Error TextInputMask React Native Paper

[lordjack]

Hello, when trying to use the mask in TextInput, it didn't work presented this problem as shown below.

Anyone who can help, thank you.

Code sample

import { Button, Card, TextInput, TextInputMask } from "react-native-paper"; <TextInput name="telefone" label="(84) 98800-0000" value={this.state.telefone} onChangeText={(text) => this.setState({ telefone: text })} left={<TextInput.Icon name="phone" />} render={(props) => ( <TextInputMask {...props} mask="+[00] [0000] [00000]" /> )} />

What have you tried

However, I tested it at the Snack Expo, and even then it didn't work as you can see through the link below. https://snack.expo.io/@jacksonm/dfb099

I saw this error here but it didn't work either. https://github.com/callstack/react-native-paper/issues/1553

Your Environment

My environment is with the following configuration. | react-native-paper "^4.7.2" | | expo sdk ~40.0.0, |

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at UsuarioFormScreen.js:104. in TextInputFlat (at TextInput.tsx:466)

and

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TextInputFlat.

This error is located at: in RCTView (at View.js:34) in View (at TextInputFlat.tsx:320) in RCTView (at View.js:34) in View (at TextInputFlat.tsx:312) in TextInputFlat (at TextInput.tsx:466) in TextInput (created by Context.Consumer) in ThemedComponent (created by withTheme(TextInput)) in withTheme(TextInput) (at UsuarioFormScreen.js:97)...

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[lukewalczak]

Hey @lordjack, I guess you are using expo and you are trying to use TextInputMask from react-native-text-input-mask library, however that library is currently not supported in the expo. Maybe other lib such as https://github.com/benhurott/react-native-masked-text will fit for you?

[Overz]

the label is "overriding" the content

import React, { createRef, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

import { TextInput, HelperText, Button } from 'react-native-paper';
import { TextInputMask } from 'react-native-masked-text';

export default function App() {
  const [someValue, setSomeValue] = useState('');
  const [someValue2, setSomeValue2] = useState('');
  const ref = createRef();
  const ref2 = createRef();

  const handle = () => {
    console.log({ someValue });
  };

  return (
    <View style={styles.container}>
      <TextInput
        label="My Label"
        mode="outlined"
        placeholder="Write someting..."
        render={(props) => (
          <TextInputMask
            {...props}
            value={someValue}
            type="cpf"
            ref={ref}
            onChangeText={(text) => setSomeValue(text)}
          />
        )}
      />
      <TextInput
        label="My Label"
        mode="outlined"
        placeholder="Write someting..."
        render={(props) => (
          <TextInputMask
            {...props}
            value={someValue2}
            type="cpf"
            ref={ref2}
            onChangeText={(text) => setSomeValue2(text)}
          />
        )}
      />
      <Text>It doesn't work.</Text>
      <Button mode="contained" onPress={handle}>
        Test
      </Button>
    </View>
  );
}

[lukewalczak]

Hey @Overz, within your onChangeText please call also the same method from props to update the component state in order to avoid bug:

      <TextInput
        label="My Label"
        mode="outlined"
        placeholder="Write someting..."
        render={(props) => (
          <RNTextInput
            {...props}
            value={someValue2}
            type="cpf"
            ref={ref2}
            onChangeText={(text) => {
              props.onChangeText?.(text);
              setSomeValue2(text);
            }}
          />
        )}
      />

[Overz]

Hi @lukewalczak , thank you for feedback.

It worked !! Thank you very much !!

[oldo]

I had success using https://github.com/akinncar/react-native-mask-text