Skia video rotation.

[1pharaxh]

Hi I have been working on an app that records video using expo camera and plays it using skia Image. I record the video in portrait mode but for some reason it is always in landscape in the skia image view. I am Following the guide on
https://shopify.github.io/react-native-skia/docs/video#rotated-video

to rotate video but It does not seem to work

below is the video recording of before applying the transform

ScreenRecording_04-23-2025_19-30-30_1.mov

after applying the transform as you can see the recorded video is rotated perfectly but chopped off from the middle and placed at the top

ScreenRecording_04-23-2025_19-38-46_1.mov

Here is my code (It appears that the expo-camera recorded has video with 1920 as width and 1080 as height which is flipped, flipping these back in code does not seem to help)

import {
  Canvas,
  CanvasProps,
  ColorMatrix,
  DiscretePathEffect,
  fitbox,
  Image,
  Path,
  rect,
  Skia,
  useVideo,
} from "@shopify/react-native-skia";
import { Dimensions, Pressable, useWindowDimensions, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import useGlobalStore from "~/store/globalStore";
import { Audio } from "expo-av";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import DrawView from "../DrawView";
import RenderStickers from "../Stickers/RenderStickers";
import { GestureHandler } from "../GestureHandler";

type VideoViewProps = Omit<CanvasProps, "children"> & {};

export default function VideoViewComponent(props: VideoViewProps) {
  const { ...rest } = props;

  const paused = useSharedValue(false);
  const { width, height } = Dimensions.get("screen");

  const { video, filter, stickers } = useGlobalStore();
  const { currentFrame, rotation, size } = useVideo(video, {
    paused,
  });

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

  const currentPath = useSharedValue(Skia.Path.Make());

  useEffect(() => {
    async function playSound() {
      console.log("Loading Sound");
      const { sound } = await Audio.Sound.createAsync({ uri: video });

      console.log("Playing Sound");
      await sound.playAsync();
    }

    playSound();
  }, []);

  const src = rect(0, 0, size.width, size.height);
  const dst = rect(0, 0, width, height);
  const transform = fitbox("cover", src, dst, rotation);

  console.log("transform", transform);
  console.log("src", src);
  console.log("dst", dst);
  console.log("rotation", rotation);

  return (
    <Pressable
      style={{ flex: 1 }}
      onPress={() => (paused.value = !paused.value)}
    >
      <GestureHandlerRootView style={{ flex: 1, position: "relative" }}>
        <DrawView currentPath={currentPath}>
          <View style={{ flex: 1 }}>
            <Canvas style={{ flex: 1 }} {...rest}>
              <Image
                image={currentFrame}
                x={0}
                y={0}
                width={width}
                transform={transform}
                fit="none"
                height={height}
              />
              <ColorMatrix
                matrix={
                  filter && filter.colorMatrix.length > 0
                    ? filter.colorMatrix
                    : [
                        1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0,
                        0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0,
                      ]
                }
              />
              {stickers?.map((e, idx) => (
                <RenderStickers item={e} matrix={e.matrix} key={idx} />
              ))}
              <Path
                path={currentPath}
                color="#61DAFB"
                style="stroke"
                strokeWidth={2}
              >
                <DiscretePathEffect length={10} deviation={2} />
              </Path>
            </Canvas>

            {stickers?.map((e, idx) => (
              <GestureHandler debug key={idx} sticker={e} />
            ))}
          </View>
        </DrawView>
      </GestureHandlerRootView>
    </Pressable>
  );
}

Here is the console output

 (NOBRIDGE) LOG  transform [{"translateX": -47.125}, {"translateY": 0}, {"scaleX": 0.48541666666666666}, {"scaleY": 0.48541666666666666}, {"translate": [1080, 0]}, {"rotate": 1.5707963267948966}]

 (NOBRIDGE) LOG  src {"__typename__": "\"Rect\"", "dispose": [Function dispose], "height": 1080, "setLTRB": [Function setLTRB], "setXYWH": [Function setXYWH], "width": 1920, "x": 0, "y": 0}

 (NOBRIDGE) LOG  dst {"__typename__": "\"Rect\"", "dispose": [Function dispose], "height": 932, "setLTRB": [Function setLTRB], "setXYWH": [Function setXYWH], "width": 430, "x": 0, "y": 0}

 (NOBRIDGE) LOG  rotation 90

[1pharaxh]

I solved it by passing the same width and height in the src rect box : )