[ios] : Add allowsEdgeAntialiasing on views with rotations or skew tr…

[Arkolos]

…ansforms

Summary

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 #1999

However a new PR was merge ( #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

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

After

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>
)

[facebook-github-bot]

Hi @Arkolos!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[pull-bot]

Messages

📖

📋 Verify Changelog Format - A changelog entry has the following format: [CATEGORY] [TYPE] - Message. CATEGORY may be: General iOS Android JavaScript Internal (for changes that do not need to be called out in the release notes) TYPE may be: Added, for new features. Changed, for changes in existing functionality. Deprecated, for soon-to-be removed features. Removed, for now removed features. Fixed, for any bug fixes. Security, in case of vulnerabilities. MESSAGE may answer "what and why" on a feature level. Use this to briefly tell React Native users about notable changes.

Generated by 🚫 dangerJS against 711c29d

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: a46a99e
Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,291,740	+39
android	hermes	armeabi-v7a	7,628,853	+17
android	hermes	x86	8,764,465	+22
android	hermes	x86_64	8,701,385	+33
android	jsc	arm64-v8a	9,678,788	-59
android	jsc	armeabi-v7a	8,672,595	-68
android	jsc	x86	9,637,021	-69
android	jsc	x86_64	10,231,535	-64

Base commit: a46a99e
Branch: main

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[facebook-github-bot]

@sshic has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[RomualdPercereau]

Any news on this?

[react-native-bot]

This pull request was successfully merged by Mattéo Martin in e6a3410.

^{When will my fix make it into a release? | Upcoming Releases}