[Expo] Hello World example doesn't render anything on iOS. Android doesn't blend

[kristian-nst]

Description

Related issues seen: https://github.com/Shopify/react-native-skia/issues/2636

Testing this right after installation: https://shopify.github.io/react-native-skia/docs/getting-started/hello-world

const width = 256
const height = 256
const r = width * 0.33

return (
        <Canvas style={{ width, height, backgroundColor: 'pink' }}>
          <Group blendMode="multiply">
            <Circle cx={r} cy={r} r={r} color="red" />
            <Circle cx={width - r} cy={r} r={r} color="magenta" />
            <Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
          </Group>
        </Canvas>
)

Any ideas? :)

React Native Skia Version

1.5.0

React Native Version

0.76.9

Using New Architecture

• [ ] Enabled

Steps to Reproduce

  "dependencies": {
    "@expo/vector-icons": "14.0.2",
    "@formatjs/intl-getcanonicallocales": "2.5.3",
    "@formatjs/intl-locale": "4.2.5",
    "@formatjs/intl-pluralrules": "5.3.5",
    "@gorhom/bottom-sheet": "5.1.2",
    "@hookform/resolvers": "3.9.1",
    "@moonpay/react-native-moonpay-sdk": "1.0.5",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.2.0",
    "@react-native-community/netinfo": "11.4.1",
    "@react-native-picker/picker": "2.9.0",
    "@react-navigation/bottom-tabs": "7.3.9",
    "@react-navigation/drawer": "7.1.1",
    "@react-navigation/native": "7.1.5",
    "@react-navigation/native-stack": "7.3.9",
    "@shopify/flash-list": "1.7.3",
    "@shopify/react-native-skia": "1.5.0",
    "@tanstack/react-query": "5",
    "@ts-rest/core": "3.51.0",
    "@ts-rest/react-query": "3.51.0",
    "add": "2.0.6",
    "class-variance-authority": "0.7.0",
    "clsx": "2.1.1",
    "crypto-es": "2.1.0",
    "exome": "2.6.0",
    "expo": "52.0.27",
    "expo-application": "6.0.2",
    "expo-build-properties": "0.13.2",
    "expo-clipboard": "7.0.1",
    "expo-crypto": "14.0.2",
    "expo-dev-client": "5.0.19",
    "expo-device": "7.0.3",
    "expo-file-system": "18.0.12",
    "expo-font": "13.0.4",
    "expo-haptics": "14.0.1",
    "expo-image": "2.0.7",
    "expo-image-picker": "16.0.6",
    "expo-linear-gradient": "14.0.2",
    "expo-linking": "7.0.5",
    "expo-local-authentication": "15.0.2",
    "expo-localization": "16.0.1",
    "expo-navigation-bar": "4.0.9",
    "expo-notifications": "0.29.14",
    "expo-secure-store": "14.0.1",
    "expo-sharing": "13.0.1",
    "expo-splash-screen": "0.29.22",
    "expo-status-bar": "2.0.1",
    "expo-store-review": "8.0.1",
    "expo-system-ui": "4.0.9",
    "expo-tracking-transparency": "5.1.1",
    "expo-web-browser": "14.0.2",
    "immer": "10.1.1",
    "lottie-react-native": "7.1.0",
    "nativewind": "4.1.23",
    "radash": "12.1.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-hook-form": "7.53.2",
    "react-native": "0.76.9",
    "react-native-auth0": "4.0.0",
    "react-native-bootsplash": "6.3.2",
    "react-native-gesture-handler": "2.20.2",
    "react-native-get-random-values": "1.11.0",
    "react-native-reanimated": "3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "4.4.0",
    "react-native-svg": "15.8.0",
    "react-native-url-polyfill": "2.0.0",
    "react-native-web": "0.19.13",
    "react-native-webview": "13.12.5",
    "rn-crypto-js": "1.1.2",
    "tailwind-merge": "2.5.5",
    "tailwindcss": "3.4.16",
    "typesafe-i18n": "5.26.2",
    "uuid": "11.0.3",
    "zod": "3.23.8"
  },

Snack, Code Example, Screenshot, or Link to Repository

https://snack.expo.io/sorry

I don't think there's anything special in our app. It's quite a basic Expo app with ReactNavigation.

PS: Hermes + new architecture on iOS. Android has new arch disabled

[kristian-nst]

Sometimes, after killing the app in iOS and restarting, it may render:

But it also doesn't multiply like in the docs. Some other blendModes do something, but i don't think they do it correctly:

blend mode: color:

blend mode: saturation

[wcandillon]

this does look strange, can you share a small repository where I can reproduce/investigate the issue?

[KonstantinSavik]

Hi there! @kristian-nst Have you found a reason ot solution? I faced with the same behaviour The canvas is rendered fine, but any shapes inside of canvas don't render. After I unistall my app and install it back - everything was fine, but till the first app restart I test it on real ios device

[KonstantinSavik]

Ok, When I disabled strict mode, everything is fine

[wcandillon]

We fixed/shipped the strict mode issue a while back already, sorry for not tagging this issue then. Please let me know if you are still experiencing an issue