No overload match this call (Component React + Typescript)

Question

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"> & { ...; } & { ...; } & { ...; }'

what is inside placeholder? in your interface you only have name, icon and placeholderTextColor, you cannot accept other props — Someone Special
– Someone Special, Commented Nov 30, 2020 at 14:57
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
– Nicolas Couto, Commented Nov 30, 2020 at 17:25
that placeholder contains what props? can u add it to the interface? — Someone Special
– Someone Special, Commented Nov 30, 2020 at 17:31
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
– Nicolas Couto, Commented Nov 30, 2020 at 17:36
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
– Nicolas Couto, Commented Nov 30, 2020 at 17:46

Someone Special · Accepted Answer · 2020-11-30 18:31:32Z

2

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;
}

answered Nov 30, 2020 at 18:31

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nicolas Couto Over a year ago

The error is gone...but show another error inside of the text input with the same message in the main post

Nicolas Couto Over a year ago

In My Github this change was maded github.com/nicktecno/BarbeariaMobile.git

Someone Special Over a year ago

I haven't used styled-component so I'm not sure whether styled components is passing any weird props over. Try importing textinput from react-native and see whether we can isolate the problem to styled-components?

Nicolas Couto Over a year ago

Worked, I think that find the solution of the problem, The Styled Components

Someone Special Over a year ago

maybe instead of finding a solution, to use other way to style the text input.

Nicolas Couto · Accepted Answer · 2020-11-30 19:38:01Z

1

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

answered Nov 30, 2020 at 19:38

Nicolas Couto

612 silver badges6 bronze badges

Collectives™ on Stack Overflow

No overload match this call (Component React + Typescript)

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related