I use React Native Paper and react-native-text-input-mask to show a field for the phone number:
// Importsimport {TextInput} from 'react-native-paper'import TextInputMask from 'react-native-text-input-mask'// Control<TextInput label="Phone" style={styles.formControl} render={props => (<TextInputMask {...props} mask={'+1 ([000]) [000] [00] [00]'} onChangeText={onPhoneChanged} /> )}/>// Callbackconst onPhoneChanged = ( formatted: string, extracted: string | undefined,) => { setPhone(extracted ?? '')}
However, it fails with errors:
Type '{ mask: string; onChangeText: (formatted: string, extracted: string | undefined) => void; ref: (a?: TextInput | null | undefined) => void; placeholder?: string | undefined; ... 10 more ...; adjustsFontSizeToFit?: boolean | undefined; }' is not assignable to type 'RefAttributes<Handles>'. Types of property 'ref' are incompatible. Type '(a?: TextInput | null | undefined) => void' is not assignable to type 'Ref<Handles> | undefined'. Type '(a?: TextInput | null | undefined) => void' is not assignable to type '(instance: Handles | null) => void'. Types of parameters 'a' and 'instance' are incompatible. Type 'Handles | null' is not assignable to type 'TextInput | null | undefined'. Type 'Handles' is missing the following properties from type 'TextInput': isFocused, clear, measure, measureInWindow, and 17 more.ts(2322)
I tried to remove props
but the control doesn't work then.
How to fix it?