transform rotate degree doesn't right when gives 45deg.

[shuyankwok]

I am...Reporting a bug

My code is:

const checks = StyleSheet.create({
  normal: {
    position: "relative",
    width: 16,
    height: 16,
    borderWidth: 1,
    borderColor: "#e6e8eb",
    borderRadius: 2,
    backgroundColor: "#fff",
  },
  marker: {
    width: 6,
    height: 10,
    position: "absolute",
    left: 4,
    top: 1,
    borderColor: 'white',
    borderBottomWidth: 2,
    borderRightWidth: 2,
    transform: 'rotate(45)'
  },
  checked: {
    borderColor: '#3370ff',
    backgroundColor: '#3370ff'
  }
});


<View style={[checks.normal, checks.checked]}>
  <View style={[checks.marker]}></View>
</View>

I expect the inside View will rotate 45deg counter-clock like this:

But I got this one:

The rotation attr in Sketch is shown as -45, not 45.
I tired more degrees like 90, 180, etc, many of them wrong too.

the react-sketchapp version is 2.1.2 and Sketch's version is 56.3 (81716)

[macintoshhelper]

I've reproduced this with the same code.

It's parsing the rotation as 45 when converting to Sketch file JSON, but it appears that when Sketch shows "45" in the GUI, the file actually has -45. Inverting fixes this for some rotations, but say 270 is converting to 90 for some reason.

I'm thinking that maybe the transform API could be aligned with React Native, which convert to web nicely with react-native-web. https://github.com/facebook/react-native/blob/0ee5f68929610106ee6864baa04ea90be0fc5160/Libraries/Utilities/MatrixMath.js

[mathieudutour]

It probably should yes! IIRC I hack together the transform support but there are def some edge cases I might I missed

[kchetan92]

I don't see transform property in the Style interface.

[yuchuanxi]

I has this bug too in version 3.0.4

[mathieudutour]

it should be fixed in v3.

Do you have a repro somewhere?

[yuchuanxi]

@mathieudutour I push to github

https://github.com/yuchuanxi/sketchappTransform