The transform style does not work in version 0.73.*

[bear-ei]

Environment

react-native -v: 0.73.2
npm ls react-native-macos: 0.73.6
node -v: 21.4.0
npm -v: 10.2.4
yarn --version: 1.22.19
xcodebuild -version: Xcode 15.0 Build version 15A240d

Steps to reproduce the bug

Adds transform style related properties to the element.

<View style={{ width: 50, height: 50, backgroundColor: 'red', opacity: 1, transform: [{scaleX: 2}, {translateX: 80}, {rotateX: '45deg'}], }}></View>

Expected Behavior

Correct rendering of transform style related properties.

Actual Behavior

The transform style-related properties are valid on iOS, but not on macOS.

Reproducible Demo

No response

Additional context

No response

[Saadnajmi]

Does it work with 0.72, so the regression started with 0.73?

[bear-ei]

Does it work with 0.72, so the regression started with 0.73?

This problem started with 0.73, 0.72 and earlier versions work fine.

[AdrianFahrbach]

Can confirm. I got the same issue! It seems like translate is working fine, the other transforms are not working though. @Saadnajmi Do you think that this is something that will be fixed soon?

[Saadnajmi]

I don't have an ETA for a fix yet, but it is something we'd like to have fixed since it's one of the basic scenarios.

[bear-ei]

我还没有修复的预计时间，但这是我们希望修复的问题，因为它是基本场景之一。

I don't know if this is the same problem. In my development, I found that when the transform property translateY is used to offset an element, the rendering is visually effective. But when I inspect the element it doesn't work, and its event triggers are kept at the position before the offset.

This problem occurs in 0.72.*.

<AnimatedContainer
            {...containerProps}
            shape="extraSmall"
            containerHeight={containerLayout.height}
            containerPageX={containerLayout.pageX}
            containerPageY={containerLayout.pageY}
            containerWidth={containerLayout.width}
            layoutHeight={height}
            layoutWidth={width}
            supportingPosition={supportingPosition}
            testID={`tooltip__supporting--${id}`}
            type={type}
            visible={visible}
            style={{
                opacity: renderOpacity,
                transform: supportingPosition?.startsWith('vertical')
                    ? [{translateX: -(width / 2)}]
                    : [{translateY: -(height / 2)}],       //➡️ Here, translateY is used
            }}>
            <Inner {...onEvent} testID={`tooltip__supportingInner--${id}`}>
                <SupportingText
                    ellipsizeMode="tail"
                    numberOfLines={1}
                    size="small"
                    testID={`tooltip__supportingText--${id}`}
                    type="body">
                    {supportingText}
                </SupportingText>
            </Inner>
        </AnimatedContainer>

[Saadnajmi]

Just a slight update, we're gonna try to pick this up in the next couple of weeks. I know that this is a pretty annoying regression in 0.73, and we recognize its importance.

[amgleitman]

This change from upstream appears to be the culprit: https://github.com/microsoft/react-native-macos/commit/5f40f0800e64b4380d7897b2e8b9ff561d84b97c#diff-603b7dc6b8a6a1475051de116973331aa452b0c76cfa4f36cd413ac859e5534c