Error TextInputMask React Native Paper

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)…

[Overz]

Hi @lukewalczak , thank you for feedback.

It worked !! Thank you very much !!

[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);
            }}
          />
        )}
      />