No overload match this call (Component React + Typescript)

0
votes

In my placeholderTextColor the error of the title persist and do not find a solution

 import React from 'react';
import { TextInputProps } from 'react-native';
import { color } from 'react-native-reanimated';

import { Container, TextInput, Icon } from './styles';

interface InputProps extends TextInputProps {
  name: string;
  icon: string;
}
// todas as propriedades "rest" sao passadas para o TExt Input, no caso apenas o placeholder
const Input: React.FC<InputProps> = ({ name, icon, ...placeholder }) => (
  <Container>
    <Icon name={icon} size={20} color="#666360" />

    <TextInput
      keyboardAppearance="dark"
      placeholderTextColor="#666360"
      {...placeholder}
    />
  </Container>
);
export default Input;

The error persists, if I remove spread operator the error is vanish, but it s not a solution

Full Error

(JSX attribute) placeholderTextColor?: string | typeof OpaqueColorValue | undefined The text color of the placeholder string

No overload matches this call. Overload 1 of 2, '(props: Pick<Pick<TextInputProps & RefAttributes, "ref" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | ... 104 more ... | "showSoftInputOnFocus"> & Partial<...>, "ref" | ... 109 more ... | "showSoftInputOnFocus"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type 'ColorValue' is not assignable to type 'string | unique symbol | undefined'. Type 'unique symbol' is not assignable to type 'string | unique symbol | undefined'. Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof TextInput, DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof TextInput, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type 'ColorValue' is not assignable to type 'string | unique symbol | undefined'. Type 'unique symbol' is not assignable to type 'string | unique symbol | undefined'.ts(2769) index.d.ts(1626, 5): The expected type comes from property 'placeholderTextColor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<TextInputProps & RefAttributes, "ref" | "style" | "hitSlop" | ... 107 more ... | "showSoftInputOnFocus"> & Partial<...>, "ref" | ... 109 more ... | "showSoftInputOnFocus"> & { ...; } & { ...; } & { ...; }' index.d.ts(1626, 5): The expected type comes from property 'placeholderTextColor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<TextInputProps & RefAttributes, "ref" | "style" | "hitSlop" | ... 107 more ... | "showSoftInputOnFocus"> & Partial<...>, "ref" | ... 109 more ... | "showSoftInputOnFocus"> & { ...; } & { ...; } & { ...; }'

2
typescriptreact-native
what is inside placeholder? in your interface you only have name, icon and placeholderTextColor, you cannot accept other props - Someone Special
Inside the placeholder is just the placeholder from a input. I put the placeholderTextColor in the interface, but is not the correct thing to do, the correct code is without him, but the same error (overload match) shows in placeholderTextColor } - Nicolas Couto
that placeholder contains what props? can u add it to the interface? - Someone Special
For now, receive <Input name="email" icon="mail" placeholder="Email" /> <Input name="password" icon="lock" placeholder="Senha" />, so, just receive the prop placeholder with word Email and Senha - Nicolas Couto
I do this, but the placeHolderColor show other error (JSX attribute) placeholderTextColor?: string | typeof OpaqueColorValue | undefined The text color of the placeholder string. No overload matches this call. The app work, but VSCode show the error - Nicolas Couto

2 Answers

1
votes

You are using placeholderTextColor which is a existing prop of TextInput but you are reassigning it as string.

can u try or deleting it.

interface InputProps extends TextInputProps {
  name: string;
  icon: string;
  placeholderTextColor: color;
}
1
votes

The solution for this case it was receive the property imported inner other property placeholder like below:

interface InputProps extends TextInputProps {
  name: string;
  icon: string;
  placeholder: string;
}
// todas as propriedades "rest" sao passadas para o TExt Input, no caso apenas o placeholder
const Input: React.FC<InputProps> = ({ name, icon, placeholder }) => (
  <Container>
    <Icon name={icon} size={20} color="#666360" />
    <TextInput keyboardAppearance="dark" placeholder={placeholder} />
  </Container>
);
export default Input;

Thx @Someone Special to find the problem with Styled Components