[TypeScript] [Stylesheet] TS2322 error thrown when `transform` property is used in a style object returned from a function

Steps to reproduce

1. Checkout reproducer
2. Open terminal and run yarn reproduce

Actual Result: Error is thrown
Expected Result: No error is thrown

More info:

• Revert to react-native: 0.72.7 will fix this issue
• Potential source of this issue:
  • https://github.com/facebook/react-native/pull/38348
  • https://github.com/facebook/react-native/commit/e414713e4c6d19a4f4aaa0193f540636dd936eb0

React Native Version

0.73.0

Affected Platforms

Build - Windows

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
  Memory: 107.57 GB / 127.75 GB
Binaries:
  Node:
    version: 18.17.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.21
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 9.6.7
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
  Java:
    version: 20.0.1
    path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0
    wanted: 0.73.0
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

the-bug-is-here.ts:8:7 - error TS2322: Type '() => { transform: ({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]; }' is not assignable to type 'StyleCreator'.
  Call signature return types '{ transform: ({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]; }' and 'ViewStyle' are incompatible.
    The types of 'transform' are incompatible between these types.
      Type '({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]' is not assignable to type 'string | (({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; ... 4 more ...; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; }))[]'.
        Type '({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]' is not assignable to type '(({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; }))[]'.
          Type '{ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; }' is not assignable to type '({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; })'.
            Type '{ translateX: number; rotateX?: undefined; }' is not assignable to type '({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; })'.
              Type '{ translateX: number; rotateX?: undefined; }' is not assignable to type '{ matrix: AnimatableNumericValue[]; } & { perspective?: never; rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; }'.
                Property 'matrix' is missing in type '{ translateX: number; rotateX?: undefined; }' but required in type '{ matrix: AnimatableNumericValue[]; }'.

Reproducer

https://github.com/hieucd04/reproducer-react-native

Screenshots and Videos

No response

reproducer の the-bug-is-here.ts から始め、yarn reproduce を実行して、transform を使用する関数が返す style で TS2322 エラーが発生することを確認します。参照されている pull request と commit を読み、その後、React Native 0.73 で reproducer が型エラーを報告しなくなったことを確認します。