[Expo] Hello World example doesn't render anything on iOS. Android doesn't blend #3088
Description
Description
Related issues seen: #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
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