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 clarityinterface 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?