Type 'Handles' is missing the following properties from type 'TextInput'

Question

I use React Native Paper and react-native-text-input-mask to show a field for the phone number:

// Imports
import {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}
    />
  )}
/>

// Callback
const 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?

score 3 · Accepted Answer · answered Apr 04 '22 at 15:43

3

I just ran into exact same error. The issue was that while I was wrapping TextInput when making my own component, it suggested that I do

(render: RenderProps) => React.ReactNode

But what you really want is this:

(textInputProps: TextInputProps) => React.ReactNode

This solved my issue and everything works fine after I made the change

answered Apr 04 '22 at 15:43

Brent Patterson

78
6

1

Thank you for the answer! To be honest I faced the reality that a cross-platform development by React Native is a ton of uncontrollable legacy code, and there is hard to locate and fix errors sometimes. I have switched to the native development with cross-platform business logic using Kotlin Multiplatform. – Denis Sologub Apr 04 '22 at 16:04
Life saver! (For clarity, should not this change is required on the '(props) => >' on the render parameter) – Liam Clark Gutiérrez Jan 27 '23 at 14:13

Type 'Handles' is missing the following properties from type 'TextInput'

1 Answers1