From e6a3410afe7d9a4cecf3db0a95503d2ff05bb862 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matte=CC=81o=20Martin?= <matteo.martin49@gmail.com>
Date: Mon, 24 Jan 2022 07:20:32 -0800
Subject: [PATCH] =?UTF-8?q?Add=20allowsEdgeAntialiasing=20on=20views=20wit?=
 =?UTF-8?q?h=20rotations=20or=20skew=20tr=E2=80=A6=20(#32920)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
…ansforms

On iOS, if a View is rotated with the a transform (e.g. <View style={{transform: {rotationZ: 5}}} />), the view has aliasing  (see screenshot). Same for a skew transformation. We don't have the issue on Android

This behavior had originally being fixed by this PR https://github.com/facebook/react-native/pull/1999

However a new PR was merge ( https://github.com/facebook/react-native/pull/19360 ) that broke this. I think it was made to add antialiasing during perspective transforms but seems to have broken the antialiasing when rotationZ transforms

This PR adds back the antialising during rotation transform , while keeping it during perspective transform.

## Changelog

I changed the allowsEdgeAntialiasing condition, making it "true" when the m12 or m21 is not 0. From this article https://medium.com/swlh/understanding-3d-matrix-transforms-with-pixijs-c76da3f8bd8 , I've understood that in all rotation or skew transformations, m12 or m21 is different than 0 . In the other transformation (e.g. scale or translate) it stays at 0.

Although, I'm not a matrix transformation expert so I may be mistaken

Pull Request resolved: https://github.com/facebook/react-native/pull/32920

Test Plan:
I've written several views with all rotateX/Y/Z , skewX,Y and perpective transformation. Before the PR some transformation was showing aliasing on iOS (e.g. top-left view in the screenshot, don't hesitate to zoom in the image if you don't see it) and with this PR it does not have anymore

Before

![Simulator Screen Shot - iPhone 13 - 2022-01-19 at 10 09 35](https://user-images.githubusercontent.com/6890533/150100149-5370c0fc-ba4f-499f-8e41-a40a10b466a9.png)

After
![Simulator Screen Shot - iPhone 13 - 2022-01-19 at 10 10 39](https://user-images.githubusercontent.com/6890533/150100229-1bb5077f-d6bb-48a2-b852-acf726fcb59e.png)

Code I used to test

```
const commonStyle = {
  width: 150,
  height: 100,
  backgroundColor: "red",
  margin: 10,
}

const Test = () => (
  <View style={{ flexDirection: "row" }}>
    <View>
      <View
        style={[
          commonStyle,
          {
            transform: [{ rotateZ: "4deg" }],
          },
        ]}
      />

      <View
        style={[
          commonStyle,
          {
            transform: [{ rotateX: "30deg" }],
          },
        ]}
      />

      <View
        style={[
          commonStyle,
          {
            transform: [{ rotateY: "30deg" }],
          },
        ]}
      />
      <View
        style={[
          commonStyle,
          {
            transform: [{ rotateX: "30deg" }, { rotateY: "30deg" }, { rotateZ: "3deg" }],
          },
        ]}
      />
    </View>

    <View>
      <View
        style={[
          commonStyle,
          {
            transform: [{ skewX: "4deg" }],
          },
        ]}
      />

      <View
        style={[
          commonStyle,
          {
            transform: [{ skewY: "4deg" }],
          },
        ]}
      />

      <View
        style={[
          commonStyle,
          {
            transform: [{ skewY: "4deg" }, { rotateZ: "3deg" }],
          },
        ]}
      />

      <View
        style={[
          commonStyle,
          {
            transform: [{ perspective: 1000 }],
          },
        ]}
      />
    </View>
  </View>
)
```

Reviewed By: lunaleaps

Differential Revision: D33665910

Pulled By: sshic

fbshipit-source-id: 91163ec2a0897a73ddf0310d86afacea04b89bc7
---
 React/Views/RCTViewManager.m | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m
index 34a60b04c66..b35048e3831 100644
--- a/React/Views/RCTViewManager.m
+++ b/React/Views/RCTViewManager.m
@@ -163,8 +163,9 @@ RCT_CUSTOM_VIEW_PROPERTY(shouldRasterizeIOS, BOOL, RCTView)
 RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RCTView)
 {
   view.layer.transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
-  // Enable edge antialiasing in perspective transforms
-  view.layer.allowsEdgeAntialiasing = !(view.layer.transform.m34 == 0.0f);
+  // Enable edge antialiasing in rotation, skew, or perspective transforms
+  view.layer.allowsEdgeAntialiasing = view.layer.transform.m12 != 0.0f || view.layer.transform.m21 != 0.0f ||
+    view.layer.transform.m34 != 0.0f;
 }
 
 RCT_CUSTOM_VIEW_PROPERTY(accessibilityRole, UIAccessibilityTraits, RCTView)