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,
},
});