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.

[alexvcasillas]

This is happening to me as well when running it on my real device, none of the Skia components are being rendered

[matinzd]

Sorry for tagging you but this seems like a regression. Can you take a look at it?

@wcandillon

[wcandillon]

I just had a look at it but I need a reproduction. A community explained me that another issue might be related to this one which led me to believe that I might not need a reproduction but it turned out to be unrelated. I hope we can get to the bottom of this quickly.

[wcandillon]

The example you provided works for me so I probably need a small app as a reproduction or something.

[aleksey-golovanov]

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.

I had the exact same problem, and I tried to reproduce it on a new project, but I can't. Somehow it works, despite all the libraries being the same versions. An absolute beauty of React Native development.

So what I ended up doing is copy-pasting the code from the old project to the new one. The new one works, package.json is identical, the new architecture is turned on. I have no idea what was the reason.

"@shopify/react-native-skia": "^1.5.1", "react-native": "^0.75.4", "expo": "~51.0.28",

[matinzd]

I would say it is also very random on my own project as well. Sometimes it shows up sometimes it doesn't. There might be something messing with rn skia from outside.

[padge]

I encountered this on the new arch – sometimes Skia components will render just fine, other times they won't. I haven't had time to try and reproduce on a new project yet.

@shopify/react-native-skia@1.5.3 expo@^52.0.0 react-native@0.76.2

[padge]

[Edited for brevity] So I originally reproduced the issue using @react-navigation ^6.0, even in a new project. However the issue went away (mostly) when upgrading to ^7.0. The Skia components would still disappear if I tap "Show Perf Monitor" and navigate between screens (note: I couldn't tap Expo's "Toggle perf monitor" as the perf monitor wouldn't stay visible), and I can't reproduce this behaviour in a new project. I probably need to do what aleksey did and copy my code to a new project.