Event handlers are typed any in styled-components/native

[amorino]

Environment

System:

• OS: macOS 13.4.1
• CPU: (8) arm64 Apple M1 Pro
• Memory: 385.42 MB / 32.00 GB
• Shell: 5.9 - /bin/zsh

Binaries:

• Node: 16.17.0 - ~/.volta/tools/image/node/16.17.0/bin/node
• Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
• npm: 8.15.0 - ~/.volta/tools/image/node/16.17.0/bin/npm
• Watchman: 2023.07.10.00 - /opt/homebrew/bin/watchman

npmPackages:

• styled-components: 6.0.7 => 6.0.7

Event callbacks are typed as any with styled-components/native on React Native, based on this PR: #4086, this should be fixed and it is on the styled-components package but not on the styled-components/native.

Reproduction

import styled from "styled-components/native";
import React from "react";

export const Container = styled.View({
  width: "100%",
});

type Props = {
  children?: React.ReactNode;
}

export function Component({ children }): Props) {
  const [containerWidth, setContainerWidth] = useState(0);
  return (
    <Container
      onLayout={event => { // typed as any
        setContainerWidth(event.nativeEvent.layout.width);
      }}
    >
      {children}
    </Container>
  );
}

import React from "react";
import { View  } from "react-native";

type Props = {
  children?: React.ReactNode;
}

export function Component({ children }): Props) {
  const [containerWidth, setContainerWidth] = useState(0);
  return (
    <View
      onLayout={event => { // typed correctly as LayoutChangeEvent
        setContainerWidth(event.nativeEvent.layout.width);
      }}
    >
      {children}
    </View>
  );
}

Expected Behavior

Infer typing

Actual Behavior

Events are typed as any in styled-components/native

[wr-lhiggitt]

This also happening for me