skewX, skewY does not work!

[Pourya8366]

Description

i styled a <View /> with transform: [{skewX: "-20deg"}] and it does nothing at all!
when i use skewY it do rotate!!!

Reproduction

https://rnplay.org/apps/FlXziw

Solution

i think it's a react native bug!

Additional Information

• React Native version: 0.41.0
• Platform: Android
• Operating System: Windows

[glcrazier]

There is no built-in skew animation on Android anyway.

[lndgalante]

Having the same problem here. The transform skewY does works, but if you add skewX then skewY stops working. Even using skewX only will not work.

I'm running everything on:

• React Native version: 0.41.2
• Platform: Android 4.4.4 API 19
• Operating System: macOS 10.12.3

[roshangm1]

I am having the same problem as @Fenwil . Any workarounds ?

[Pourya8366]

@glcrazier there is a skew function in canvas library of android and it works there!

[glcrazier]

@Pourya8366 Cool, thanks for correction! I realized that matrix may do the work as well. Which function are you referring to in canvas library?

[roshangm1]

@Pourya8366 hey did you find any workarounds ?

[Pourya8366]

@glcrazier i use this function and it works!
https://developer.android.com/reference/android/graphics/Canvas.html#skew(float, float)

[Pourya8366]

@roshangm1 No, i found nothing yet! :(

[glcrazier]

it works for canvas, but it is not a good option for animation framework in my opinion. I noticed that in latest release this issue was resolved. You can take a shot

[roshangm1]

@glcrazier I think, not yet resolved. :/ working fine for iOS. Problem with android.

[lndgalante]

@roshangm1 In v0.42 is fixed:
Fix skew transform on native side (c681959) - @MaxGraey
I didn't try it yet but I guess it works now

[roshangm1]

I tried it. But it doesn't seem to be working for me. Can you confirm if it's working for you guys?

…

On Sun, Mar 5, 2017, 2:27 AM Leonardo Galante ***@***.***> wrote: @roshangm1 <https://github.com/roshangm1> In v0.42 <https://github.com/facebook/react-native/releases/tag/v0.42.0> is fixed: Fix skew transform on native side (c681959 <c681959>) - @MaxGraey <https://github.com/MaxGraey> I didn't try it yet but I guess it works now — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12212 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFmCXhRzL780RGiODiek9JOazgXXdGSLks5ricyygaJpZM4L3REB> .

[MaxGraey]

I confirm, for Android skew transform is not working.
Digging deep in ReactAndroid's sources I found the following:

1. Code to transform the view is made very inefficient. In order to apply transformation matrix firstly decompose to scale/rotate/skew/translation and applied separately to view.setTranslationX, view.setTranslationY and etc.

2. Android's view does't has methods for setSkewX and setSkewY at all. "setMatrix" absent as well!

So I see only two ways:

1. Use view's setAnimationMatrix.
2. Subclassing View to obtain direct access to private mRenderNode and his matrix property.

Both way need hard refactoring existing code

[lirui0407]

+1, skewX skewY still doesn't work.
Aug 1,2017

[pull-bot]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[larspa]

@MaxGraey I encountered the same problem and I wonder what kind of solution there is besides diving into the native code. I find it weird that only the skewX is not working while the skewY is.

[MaxGraey]

Theoreticlly you can simulate 2d skew transform via 3d rotation by X and Y axis simultaneously with ortho projection

[dogofpavlov]

Hmm, unfortunately a year and 3 months later, this is STILL not fixed. skewX doesn't work on Android, while skewY does. If you add a skewX, the skewY stops working

[huqiliang]

react-native": "0.55.4"

both skewX and skewY doesn't work on Android, is this issue solved ?

[yeomann]

same 0.57.0 still no progress i guess?

[RichardLindhout]

Not working +1 for this.

[Fortidude]

skewY and skewX not working on Android. ANy workaroud?