Transform matrix not being applied when there's other transforms (on standard Views)

[patrick91]

Not strictly related to Skia, but I got this issue by trying the stickers example, so maybe you have some ideas of what's happening:

Here's the code:

import React from "react";
import { StyleSheet, View } from "react-native";

export default function App() {
  const rotation = 60;
  const scale = 1.1;

  const deg2rad = (deg: number) => (deg * Math.PI) / 180;

  const m4 = [
    scale * Math.cos(deg2rad(rotation)),
    scale * Math.sin(deg2rad(rotation)),
    0,
    0,
    -scale * Math.sin(deg2rad(rotation)),
    scale * Math.cos(deg2rad(rotation)),
    0,
    0,
    0,
    0,
    scale,
    0,
    0,
    0,
    0,
    1,
  ];

  return (
    <View style={styles.container}>
      <View
        style={{
          ...styles.box,
          height: 100,
          width: 100,
          backgroundColor: "red",
          transform: [
            { translateX: 50 },
            { translateY: 50 },
            { matrix: m4 },
            { translateX: -50 },
            { translateY: -50 },
          ],
        }}
      />
   
      <View
        style={[
          styles.box,
          {
            height: 100,
            width: 100,
            backgroundColor: "blue",
            transform: [{ matrix: m4 }],
          },
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
  },
  box: {
    height: 100,
    backgroundColor: "#b58df1",
    borderRadius: 20,
    marginVertical: 64,
  },
});

and this is the result:

[patrick91]

I think I got bitten by this issue :'D facebook/react-native#47467