fix(types): allow recursive array of styles

[williamsjokvist]

This eases the style param typing for all components, allowing [Style[], undefined, Style] etc. to be passed. Which is a common pattern in e.g. React Native.

Desired behavior:

function PaddedView({ style, ...rest }: ViewProps) {
  return (
    <View
      style={[
        {
          padding: 12,
        },
        style
      ]}
      {...rest}
    />
  )
}

Before this would give an error, despite the JS working fine.

Type 'Style | Style[] | undefined' is not assignable to type 'Style'.
Type 'undefined' is not assignable to type 'Style'.

To circumvent this, I've seen people do these cumbersome runtime checks, which is not necessary with vanilla JS:

function Root({ style, ...rest }: ViewProps) {
  return (
    <View
      style={[
        {
          padding: 12,
        },
        ...(Array.isArray(style) ? style : [style ?? {}])
      ]}
      {...rest}
    />
  )
}

In my own projects I've added this piece of module augmentation, which is the typing included in this PR:

declare module '@react-pdf/renderer' {
  interface RecursiveArray<T>
    extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}

  type StyleProp<T> = T | RecursiveArray<T | undefined>;

  interface ViewProps {
    style?: StyleProp<Style | Style[]>;
  }
  ...
}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 368655e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[tifye]

Looks good to me