[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

Commencez par le fichier the-bug-is-here.ts du reproducer et exécutez yarn reproduce pour confirmer l’erreur TS2322 pour un style renvoyé par une fonction utilisant transform. Lisez la pull request et le commit référencés, puis vérifiez que le reproducer ne signale plus l’erreur de type avec React Native 0.73.