0

I'm using styled-components for styling in React Native with Typescript. I created a StyledComponent that styles a View component. However, when I try to extend the ViewProps, it throws me an error:

Type '{ children: ReactNode; row?: boolean | undefined; 
    highlight?: boolean | undefined; hitSlop?: Insets | undefined; 
    onLayout?: ((event: LayoutChangeEvent) => void) | undefined; ... 49 more ...; 
    accessibilityIgnoresInvertColors?: boolean | undefined; }' 
    is not assignable to type '{ ref?: Ref<View> | undefined; children?: ReactNode; 
    style?: ((false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<...>) & 
    (false | ... 2 more ... | RecursiveArray<...>)) | null | undefined;
    ... 53 more ...; row?: boolean | undefined; }'.

Here is the code for a Paper component I made:

// imports...
import styled from 'styled-components/native';
import {ViewProps} from 'react-native';

// IPaper is in a different file, putting it here for clarity
interface IPaper {
    row?: boolean;
    highlight?: boolean;
}

interface IPaperProps extends IPaper, ViewProps {}

const StyledPaper = styled.View<IPaperProps>`
    flex-direction: ${({ row }) => (row ? "row" : "column")};
    background-color: ${({ theme }) => theme.colors.white};
    ${({ theme, highlight }) =>
      highlight &&
      `
      border-width: 1px;
      border-color: ${theme.colors.primary.dark};
    `}
    border-radius: 10px;
`

const Paper: FC<IPaperProps> = ({children, ...rest}) => {
    return (
        <StyledPaper style={styles.shadow} {...rest} >
            {children}
        </StyledPaper>
    )
}

const styles = StyleSheet.create({
    shadow: {
        elevation: 6,
        //...
    }
})

The error shows up on the <StyledPaper>. I need to extend this so I have access to style and other props whenever I call this component. What am I doing wrong?

Echo
  • 521
  • 5
  • 16
  • What happens if you swap `const Paper: FC` for `const Paper = ({children, ...rest}: IPaperProps & {children: React.ReactNode)`? What version of typescript are you on? What version of react? – Donovan Hiland May 13 '22 at 20:52
  • @DonovanHiland it throws me the same error `No overload matches this call` and then the one above. My typescript version is `4.4.4` and react version is `17.0.2` – Echo May 14 '22 at 02:39

1 Answers1

0

For some reason, using the dot notation throws the typescript error. But when using the wrapper notation, it works.

Instead of

const StyledPaper = styled.View<IPaperProps>``

This works and does not give type errors

import {View} from 'react-native';
const StyledPaper = styled(View)<IPaperProps>``

Read here: https://stackoverflow.com/a/70949340/12101852

Echo
  • 521
  • 5
  • 16