react-native/Typescript: how to pass autoComplete value to TextInput as the parent component prop? What's the correct type?

Issue

Consider I have a custom component like this with a TextInput inside (for example a modal input dialog):

interface Props {
    ...
    autoComplete: string;
}

const ModalInputDialog = (props: Props) => {

    ...

    return (<TextInput autoComplete={props.autoComplete} ... />);

};

The Typescript compiler complains that "No overloads matches this call". The problem is that I don't know which is the correct type for the autoComplete property. It isn't string.

By inspecting TextInput It seems that there a big object called TextInputAndroidProps, but It doesn't work either.

Which is the correct type I'm searching for?

Solution

You can extract the type from TextInputAndroidProps directly using TypeScript as follows.

import { TextInput, TextInputAndroidProps } from "react-native";

interface Props {
    autoComplete: TextInputAndroidProps['autoComplete'];
}

In my current project, the prop is still called autoCompleteType, thus for older versions this is done similarly.

import { TextInputAndroidProps } from "react-native";

interface Props {
    autoComplete: TextInputAndroidProps['autoCompleteType'];
}

You will need the react-native types in your project, but I guess this is clear.

Notice as well that this is an android only prop.

Answered By - David Scholz