CODEWITHSUNDEEP
typescriptreact-nativereact-native-paperreact-native-text-input-mask
Denis Steinman
Denis Steinman

Reputation: 7799

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

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?

Upvotes: 1

Views: 663

Answers (1)

Brent Patterson
Brent Patterson

Reputation: 78

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

Upvotes: 3

Related Questions