[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

Beginne mit der Datei the-bug-is-here.ts des Reproducers und führe yarn reproduce aus, um den TS2322-Fehler für einen von einer Funktion zurückgegebenen Style mit transform zu bestätigen. Lies den referenzierten Pull Request und Commit und überprüfe anschließend, dass der Reproducer unter React Native 0.73 den Typfehler nicht mehr meldet.