React-native: [Android] skew transform not working

[usrbowe]

Steps To Reproduce

1. Try to set skewX for View component: transforms: [{ skewX: '45deg' }}
2. Doesn't change the skew of View on Android (works on iOS)

Describe what you expected to happen:

Basically skewX doesn't apply any skew on the view on Android.
Here is comparison between iOS/Android:

also skewY doesn't render same as on iOS (which looks more correct)

React Native version:

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.50 GB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

Related issues

• [x] https://github.com/facebook/react-native/issues/12212

Snack demo

https://snack.expo.io/@usrbowe2/e9b920

Resources

In case anyone interested, here is the source code for skew code:

1. This is called for SkewX: MatrixMathHelper.applySkewX(helperMatrix, convertToRadians(transform, transformType)); in file: Libraries/StyleSheet/processTransform.js
2. Which laters uses this matrix helper to apply transformation:
   https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/uimanager/MatrixMathHelper.java

[MarekJavurek]

This is real problem!

[HarshitMadhav]

I faced this issue too in android but for iOS, it is working fine.

[JX0829]

i also have this issue, anyone have a workaround? I had search this issue on google, there have many people said use the native canvas have no problem, so whether modify the MatrixMathHelper.java could resolve this issue?

[HarshitMadhav]

@JX0829 As of now I have searched a lot for workarounds but found nothing. Sadly, I had to remove skew for android.

[DaniAkash]

A live preview of this issue can be found at the example in https://deploy-preview-1613--react-native.netlify.com/docs/next/transforms

[PastequeBuild]

I found this package: https://github.com/wumke/react-native-skewable-view
It skews the shape of the view in android but not images and texts that are inside...
As work around you can also try using canvas, with for example this package: https://github.com/iddan/react-native-canvas#readme. But personally when I try ctx.drawImage(img, width, height) I get an error: "JSON.stringify cannot serialize cyclic structures."
So I'm still facing this problem for images.

[PastequeBuild]

For images I just recreated it by myself: I croped 100 same images with ImageEditor and aligned each part in offset to create the one I needed...