Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
kristian-nst opened this issue Apr 8, 2025 · 2 comments
Open
1 task
Labels
bug Something isn't working

Comments

@kristian-nst
Copy link

kristian-nst commented Apr 8, 2025

Description

Related issues seen: #2636

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

Image

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 kristian-nst added the bug Something isn't working label Apr 8, 2025
@kristian-nst
Copy link
Author

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

Image

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:
Image

blend mode: saturation
Image

@wcandillon
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants