Skia is not rendering anything on ios simulator when new arch is turned on

[matinzd]

Description

After turning on new archtitecture I am not able to render anything with Skia on iOS simulator

Old architecture and physical device:

New architecture:

Version

1.3.13

Steps to reproduce

1. Install latest version of React Native 0.75.3
2. Turn on new arch and build it on simulator and physical device
3. Simulator version does not render anything while physical device works

Snack, code example, screenshot, or link to a repository

import { colors } from '@kreddy-frontend/shared-ui';
import { Canvas, Path, Skia, Text, useFont } from '@shopify/react-native-skia';
import { useEffect } from 'react';
import {
  cancelAnimation,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

interface Props {
  data: number;
  radius?: number;
  strokeWidth?: number;
  strokeColor?: string;
  background?: string;
  duration?: number;
}

export const CircularGraphSkia = ({
  data = 90,
  radius = 24,
  strokeWidth = 3.5,
  strokeColor = colors.black_10,
  background = colors.black_60,
  duration = 1000,
}: Props) => {
  // it's ok to use require here because the font is a static asset
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const font = useFont(require('../assets/fonts/ReadexPro-Regular.ttf'), 12);

  const end = useSharedValue(0);

  useEffect(() => {
    end.value = withTiming(data / 100, { duration });

    return () => {
      cancelAnimation(end);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  const innerRadius = radius - strokeWidth / 2;

  const path = Skia.Path.Make();
  path.addCircle(radius, radius, innerRadius);

  if (!font) {
    return null;
  }

  const text = `${Math.trunc(data)}%`;

  const fontSize = font?.measureText(text);

  const textX = radius - fontSize.width / 2;

  return (
    <Canvas style={{ width: radius * 2, height: radius * 2 }}>
      <Path
        path={path}
        style={'stroke'}
        color={background}
        start={0}
        end={1}
        strokeWidth={strokeWidth}
        strokeJoin="round"
        strokeCap="round"
      />
      <Path
        path={path}
        style={'stroke'}
        color={strokeColor}
        start={0}
        end={end}
        strokeWidth={strokeWidth}
        strokeJoin="round"
        strokeCap="round"
        origin={{ x: radius, y: radius }}
        // Rotate the circle so that the progress starts from the PI/2 position
        transform={[{ rotate: -Math.PI / 2 }]}
      />
      <Text
        x={textX}
        y={radius + fontSize.height / 2}
        color={colors.black_10}
        text={text}
        font={font}
        origin={{ x: radius, y: radius }}
      />
    </Canvas>
  );
};

[AndreasJJ]

I am having the same problem on skia 1.4.2, React Native 0.75.3, Expo 51.0.34 and victory-native 41.4.0. Just shows an empty area on iOS simulator, but works on my real device.