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

Question

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" | ... 48 more ... | "key"> & Partial<...>, "hitSlop" | ... 54 more ... | "key">'. Types of property 'style' are incompatible.

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

question from:https://stackoverflow.com/questions/65905593/how-to-pass-all-props-to-styled-component-in-react-native-with-typescript

Answer 1

Waitting for answers