Unexhaustive handling for rotateX when using transform (rotate)

I am trying to rotate text by a certain amount, tried using ‘45deg’ like in the Transforms documentation from React Native but doesnt work either. Also tested skewX and it works.

        <Group key={`tick-${d}`}>
          <Group transform={[{ rotateX: 45 }]}>
            <Text
              x={labelX}
              y={labelY}
              text={d}
              color={textColor}
              familyName="serif"
              size={9}
            />
          </Group>

          <Path path={path} color={strokeColor} />
        </Group>

[thomas-coldwell]

Just to give a small example of the workaround you can do the following:

• Copy the Matrix4.ts code from redash
• Create you’re 3D transforms using a 4x4 matrix
• Get a 3x3 matrix using const mat3 = toMatrix3(matrix4)
• Get an SkMatrix - const matrix = Skia.Matrix(mat3)
• Pass this matrix into the matrix prop on the <Group /> component

// Copy this from redash 
import { processTransform3d } from './Matrix4' 

const clock = useClockValue();

const matrix = useComputedValue(() => {
  const rotation = (Math.sin(clock.current / 500) * Math.PI) / 4;
  return processTransform3d([
    { rotateY: rotation },
    { perspective: 500 },
  ]);
}, [clock]);

<Group matrix={matrix}>
</Group>

https://user-images.githubusercontent.com/31568400/182338383-1d949488-c388-4623-908d-edfbb5cd3bb8.MP4

[thomas-coldwell]

Hey @naraB this might be to do with the perspective matrix function I had to change the index as per what RN uses internally for its transform calculations - I think this has something to do with it using a transposed matrix so m34 gets swapped with m43 (my matrix math is a little rusty though 😅):

const perspective = (p: number): Matrix4 => {
  let mat = identity4;
  mat[11] = -1 / p;
  return mat;
};

This might explain the change a bit better: https://stackoverflow.com/a/35825372

Hope this helps 🙌