Types of .attrs are still broken for React Native on 6.1.9 when using styled()

[eramdam]

Environment

System:

• OS: macOS 14.4.1
• CPU: (8) arm64 Apple M1 Pro
• Memory: 6.32 GB / 32.00 GB
• Shell: 5.9 - /opt/homebrew/bin/zsh

Binaries:

• Node: 20.11.0 - ~/Library/Caches/fnm_multishells/37631_1714680934942/bin/node
• npm: 10.2.4 - ~/Library/Caches/fnm_multishells/37631_1714680934942/bin/npm
• Watchman: 2024.04.29.00 - /opt/homebrew/bin/watchman

npmPackages:

• babel-plugin-styled-components: ^2.1.4 => 2.1.4
• styled-components: 6.1.9 => 6.1.9

Reproduction

I've created a codesandbox here: https://codesandbox.io/p/sandbox/styled-components-attrs-issue-forked-swv9k8

But the crux of it is this

import styled from "styled-components/native";

const MyStyledComponent = (
  props: PropsWithChildren<{
    requiredAttr: boolean;
  }>
) => {
  return <div {...props}>{props.children}</div>;
};

const StyledStyledComponent = styled(MyStyledComponent).attrs({
  requiredAttr: true,
})``;

const App = () => {
  return (
    <>
      <StyledStyledComponent>Bla</StyledStyledComponent>
    </>
  );
};

Errors out on <StyledStyledComponent> with

Details

No overload matches this call.
Overload 1 of 2, '(props: PolymorphicComponentProps<"native", FastOmit<FastOmit<Substitute<{ requiredAttr: boolean; } & { children?: ReactNode; }, { requiredAttr: boolean; } & { children?: ReactNode; }>, never>, never>, void, void, {}, {}>): Element', gave the following error.
Property 'requiredAttr' is missing in type '{ children: string; }' but required in type 'FastOmit<Substitute<FastOmit<FastOmit<Substitute<{ requiredAttr: boolean; } & { children?: ReactNode; }, { requiredAttr: boolean; } & { children?: ReactNode; }>, never>, never>, FastOmit<...>>, keyof ExecutionProps>'.
Overload 2 of 2, '(props: FastOmit<FastOmit<Substitute<{ requiredAttr: boolean; } & { children?: ReactNode; }, { requiredAttr: boolean; } & { children?: ReactNode; }>, never>, never>): ReactElement<...> | null', gave the following error.
Property 'requiredAttr' is missing in type '{ children: string; }' but required in type 'FastOmit<FastOmit<Substitute<{ requiredAttr: boolean; } & { children?: ReactNode; }, { requiredAttr: boolean; } & { children?: ReactNode; }>, never>, never>'.typescript(2769)

Steps to reproduce

Create a styled component with required props and set them with attrs using a props factory and you still have to define them again with attributes when using the component.

Expected Behavior

attrs() should work like documented and like it worked in v5

Actual Behavior

The required props have to be set again even if they've already been set by attrs using a props factory function (styled-components.com/docs/api#.attrs).

[oltioff]

@eramdam I literally have your same versions and I confirm it's not working, even copying their example. Probably they fixed into the web and not in native.

Literally doing the example provided here

[eramdam]

@eramdam I literally have your same versions and I confirm it's not working, even copying their example. Probably they fixed into the web and not in native.

Literally doing the example provided here

Yeah the web typings work fine, not the native ones 😅