0

I was trying to create a text input for React Native that displays currency. For the Text Input, I have been using React Native Paper (RNP) and was pointed towards the RNP's Text Input Render method.

<TextInput
  label="Phone number"
  render={props =>
    <TextInputMask
      {...props}
      mask="+[00] [000] [000] [000]"
    />
  }
/>

I unfortunately can't seem to get the TextInputMask to work nor any other TextInput component inside of the TextInput's render={....}. Each time I try to add a custom input component, I get the following error thrown.

React Native Error Message Image

This is the code that I'm testing with. CustomTextInput is just a standard React Native TextInput.

export default function AppTextInput({ label, onChangeText, ...otherProps }) {
  return (
    <View style={styles.container}>

      <TextInput
        label="Phone number"
        render={(props) => <CustomTextInput {...props} />}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 10,
  },
  textInput: {
    backgroundColor: defaultStyles.colors.surfaces.surface,
    color: defaultStyles.colors.content.onSurface,
  },
});
Rie Kumar
  • 1
  • 2

0 Answers0