airbnb/react-sketchapp

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

shuyankwok opened this issue · 6 comments

shuyankwok commented

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:

image

But I got this one:
image

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 commented

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 commented

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

kchetan92 commented

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

yuchuanxi commented

I has this bug too in version 3.0.4

mathieudutour commented

it should be fixed in v3.

Do you have a repro somewhere?