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.

[roy-sandoval]

I'm running into this issue too using "expo": "^52.0.11", "react-native": "0.76.3", "@react-navigation/native": "^7.0.0", "@shopify/react-native-skia": "1.5.0"
My simulator is on iOS 16

[dan-pugsley]

Also getting the same issue here 😞 (running in iOS Simulator).

expo: 52.0.11
react-native: 0.76.3
@shopify/react-native-skia: 1.5.0

[wcandillon]

I had a look at #2732 and I am wondering if you are experiencing a similar issue? Could that be? there might be a weird layout bug that makes the canvas of size 0?

Reading the comments on this thread seem to be consistent with #2732

[wcandillon]

I'm 99% sure that #2793 will fix this issue. Based on the descriptions above. I was only able to reproduce and fix #2732 but I think it's the same issue.
If this still happens after the new release please let me know and I will reopen it immediately.

[github-actions]

🎉 This issue has been resolved in version 1.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tslater]

@wcandillon
I'd like to request to re-open. The fix is partial progress for us. It makes it so the elements that were not rendering show sometimes, but do not show consistently on the new arch.