Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Typescript error when using useImperativeHandle alongside TextInput

$
0
0

I'm trying to convert ReactNative official example for useImperativeHandle with TypeScript

  • original:
function FancyInput(props, ref) {  const inputRef = useRef();  useImperativeHandle(ref, () => ({    focus: () => {      inputRef.current.focus();    }  }));  return <input ref={inputRef} ... />;}FancyInput = forwardRef(FancyInput);
  • with TypeScript:
import React, { ReactElement, Ref, useRef, useImperativeHandle, forwardRef } from "react";import { TextInput } from "react-native";interface FancyInputProps {  name: string;}const FancyInput = (props: FancyInputProps, ref: Ref<TextInput>): ReactElement => {  const inputRef = useRef<TextInput>(null);  useImperativeHandle(ref, () => ({    focus: () => {      inputRef.current.focus();    },  }));  return <input ref={inputRef} />;};export default forwardRef(FancyInput);

But focus is highlighted by my IDE with the following error message:

Type '{ focus: () => void; }' is missing the following properties fromtype 'TextInput': isFocused, clear, measure, measureInWindow, and 18more.

It's because TextInput have indeed other properties, but I want to only add one (focus), no rewrite all the others properties.

I have a feeling I'm not that far, any help will be very much appreciated!


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>