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

How to pass all props to styled component in React Native with TypeScript?

$
0
0

I have a styled component:

const Wrapper = styled.View`  align-items: center;  flex-direction: row;`;

I have a component which is using this styled component:

interface ProfileInfoBar extends ViewProps {}const ProfileInfoBar: React.FC<ProfileInfoBar> = ({ ...rest }) => {  return (<Wrapper {...rest}><Avatar firstname="A" lastname="B" size={60} /></Wrapper>  );};

But I am getting an error when trying to pass rest to Wrapper:

No overload matches this call. Overload 1 of 2, '(props:Pick<Pick<ViewProps & RefAttributes, "hitSlop" | "onLayout" |"pointerEvents" | "removeClippedSubviews" | "style" | "testID" |"nativeID" | ... 48 more ... | "key"> & Partial<...>, "hitSlop" | ...54 more ... | "key"> & { ...; } & { ...; } & { ...; }):ReactElement<...>', gave the following error.Type '{ children: Element[]; hitSlop?: Insets | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined;pointerEvents?: "none" | "auto" | "box-none" | "box-only" | undefined;... 48 more ...; accessibilityIgnoresInvertColors?: boolean |undefined; }' is not assignable to type 'Pick<Pick<ViewProps &RefAttributes, "hitSlop" | "onLayout" | "pointerEvents" |"removeClippedSubviews" | "style" | "testID" | "nativeID" | ... 48more ... | "key"> & Partial<...>, "hitSlop" | ... 54 more ... |"key">'.Types of property 'style' are incompatible.

enter image description here

I can't understand how to pass all props to styled component. Any ideas?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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