react-native-masked-text icon indicating copy to clipboard operation
react-native-masked-text copied to clipboard

Property 'isValid' does not exist on type 'TextInputMask'

Open euZebe opened this issue 4 years ago • 1 comments

I get the error TS2339: Property 'isValid' does not exist on type 'TextInputMask'. when defining the following component:

import React, { useRef, useState } from "react"
import { TextInputMask } from "react-native-masked-text"
import { DateTime } from "luxon"

interface DateTextFieldProps {
  onChangeDate: (date: Date) => void
}
export const DateTextField = ({ onChangeDate }: DateTextFieldProps) => {
  const [value, setValue] = useState<string>("")
  const ref = useRef<TextInputMask>(null)

  return (
    <TextInputMask
      type={"datetime"}
      options={{
        format: "DD/MM/YYYY",
      }}
      value={value}
      onChangeText={(newValue) => {
        setValue(newValue)
        if (ref.current?.isValid && ref.current?.isValid()) {                     //   <===== Here happens the typescript error
          onChangeDate(DateTime.fromFormat(newValue, "dd/MM/yyyy").toJSDate())
        }
      }}
      keyboardType={"numeric"}
      ref={ref}
    />
  )
}

I can see isValid() in TextInputMaskMethods, but it seems not to be related to

export class TextInputMask extends React.Component<TextInputMaskProps> {}
// TextInputMaskMethods
export class TextInputMaskMethods {
    getElement(): TextInput
    getRawValue(): string
    isValid(): boolean
}

// TextInputMasked
export type TextInputMasked = TextInputMaskMethods | null

euZebe avatar Dec 17 '20 15:12 euZebe

I was able to fix it like this:

type InputMask = TextInputMask & TextInputMaskMethods
const inputRef = useRef<InputMask>(null)

davidwico avatar Mar 11 '21 22:03 davidwico