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