Typescript issue in Styled component Button ( React-Native )

Question

this code :

import React from 'react';
import styled from 'styled-components/native';

const Button = styled.Button`
  color: palevioletred;
`;

interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return <Button> Test btn</Button>;
  }
}

throws this error :

No overload matches this call. Overload 1 of 2, '(props: Pick<Pick<ButtonProps & RefAttributes, "testID" | "accessibilityLabel" | "onPress" | "ref" | "title" | "color" | "key" | "disabled"> & Partial<...>, "testID" | ... 6 more ... | "disabled"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type '{ children: string; }' is missing the following properties from type 'Pick<Pick<ButtonProps & RefAttributes, "testID" | "accessibilityLabel" | "onPress" | "ref" | "title" | "color" | "key" | "disabled"> & Partial<...>, "testID" | ... 6 more ... | "disabled">': onPress, title Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof Button, DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof Button, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '{ children: string; }' is missing the following properties from type 'Pick<Pick<ButtonProps & RefAttributes, "testID" | "accessibilityLabel" | "onPress" | "ref" | "title" | "color" | "key" | "disabled"> & Partial<...>, "testID" | ... 6 more ...

i HAVE installed @types/styled-components why this occurs?

Try <Button title="Test Btn" />, since the Button, since the button does not receive string child — Hamza Jadid

Gabriel Gabriel · Accepted Answer · 2020-11-11T00:03:53

Every button needs to have title and onPress proprieties, those are mandatories. Your color style need to be one of the Button proprieties too.

So your Button component should be like:

<Button 
  title="Test btn"
  onPress={testFunction}
  color="#DB7093"
/>

Typescript issue in Styled component Button ( React-Native )

1 Answers