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

How to make it so that my styled component can expect ...rest as prop without TypeScript throwing an error?

$
0
0

I have a simple button component that has props title, wide and style. Inside that component I return a styled component to which I pass the wide, style props and I spread the ...rest . Unfortunately, after adding {...rest} to the styled component, I receive this error:

No overload matches this call.  Overload 1 of 2, '(props: { style?: StyleProp<ViewStyle>; children?: ReactNode; hitSlop?: Insets | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; ... 51 more ...; key?: Key | ... 1 more ... | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.    Type '{ children: Element; hitSlop?: number | Insets | null | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; pointerEvents?: "auto" | ... 3 more ... | undefined; ... 62 more ...; style: StyleProp<...>; }' is not assignable to type '{ style?: StyleProp<ViewStyle>; children?: ReactNode; hitSlop?: Insets | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; ... 51 more ...; key?: Key | ... 1 more ... | undefined; }'.      Types of property 'hitSlop' are incompatible.        Type 'number | Insets | null | undefined' is not assignable to type 'Insets | undefined'.          Type 'null' is not assignable to type 'Insets | undefined'.  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof View, DefaultTheme, { wide: boolean; }, never, typeof View, typeof View>): ReactElement<StyledComponentPropsWithAs<typeof View, ... 4 more ..., typeof View>, string | JSXElementConstructor<...>>', gave the following error.    Type '{ children: Element; hitSlop?: number | Insets | null | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; pointerEvents?: "auto" | ... 3 more ... | undefined; ... 62 more ...; style: StyleProp<...>; }' is not assignable to type '{ style?: StyleProp<ViewStyle>; children?: ReactNode; hitSlop?: Insets | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; ... 51 more ...; key?: Key | ... 1 more ... | undefined; }'.      Types of property 'hitSlop' are incompatible.        Type 'number | Insets | null | undefined' is not assignable to type 'Insets | undefined'.ts(2769)

The component:

type Props = {    title: string;    wide?: boolean;    style?: StyleProp<ViewStyle>;} & Omit<PressableProps, 'style'>;const SecondaryButton: FunctionComponent<Props> = ({ title, wide = false, style, ...rest }) => {    return (<Button wide={wide} style={style} {...rest}><ButtonText variant="h4">{title}</ButtonText></Button>    );};const Button = styled.View<{ wide: boolean }>`    padding: 12px 24px;    border-radius: 100px;    border-width: 1.5px;    justify-content: center;    align-items: center;    align-self: center;    background-color: ${colors.white};    border-color: ${colors.primary600};    width: ${(props) => (props.wide ? '100%' : 'auto')};`;const ButtonText = styled(HeaderText)`    color: ${colors.primary600};`;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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