bhrott / react-native-masked-text

A pure javascript masked text and input text component for React-Native.
MIT License
1.61k stars 249 forks source link

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

Open euZebe opened 3 years ago

euZebe commented 3 years ago

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
davidwico commented 3 years ago

I was able to fix it like this:

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