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

How to extend React Native View and other components props with styled-components

$
0
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 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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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