Bug Using Skia with Web Expo Project #3247
Description
Description
When attempting to lead React Native Skia the following errors are logged:
This leads to a blank screen. I followed the documentation and ran pnpm setup-skia-web prior to starting my server.
My index.web.tsx file
import "@expo/metro-runtime"
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web"
import { App } from "expo-router/build/qualified-entry"
import { renderRootComponent } from "expo-router/build/renderRootComponent"
LoadSkiaWeb().then(async () => {
renderRootComponent(App)
})
"dependencies": {
"@expo-google-fonts/exo": "^0.3.0",
"@expo-google-fonts/prompt": "^0.2.3",
"@expo-google-fonts/roboto": "^0.2.3",
"@expo/vector-icons": "^14.1.0",
"@gorhom/bottom-sheet": "^5.1.6",
"@react-native-async-storage/async-storage": "^2.1.2",
"@react-native-clipboard/clipboard": "^1.16.2",
"@react-native-firebase/app": "^22.1.0",
"@react-native-firebase/messaging": "^22.1.0",
"@react-native-masked-view/masked-view": "^0.3.2",
"@react-navigation/material-top-tabs": "^7.1.0",
"@repo/api-client": "workspace:*",
"@repo/ui": "workspace:*",
"@sentry/react-native": "^6.14.0",
"@shopify/flash-list": "1.7.6",
"@shopify/react-native-skia": "^2.1.1",
"@tanstack/react-query": "catalog:",
"axios": "^1.7.7",
"dayjs": "^1.11.13",
"expo": "~53.0.20",
"expo-application": "~6.1.5",
"expo-auth-session": "~6.2.1",
"expo-blur": "^14.1.5",
"expo-build-properties": "^0.14.8",
"expo-crypto": "~14.1.5",
"expo-custom-assets": "^1.4.1",
"expo-dev-client": "~5.2.4",
"expo-device": "~7.1.4",
"expo-file-system": "~18.1.11",
"expo-font": "~13.3.2",
"expo-haptics": "~14.1.4",
"expo-image": "~2.4.0",
"expo-linear-gradient": "~14.1.5",
"expo-linking": "~7.1.7",
"expo-localization": "~16.1.6",
"expo-location": "~18.1.6",
"expo-notifications": "~0.31.4",
"expo-router": "~5.1.4",
"expo-secure-store": "~14.2.3",
"expo-splash-screen": "~0.30.10",
"expo-status-bar": "^2.2.3",
"expo-system-ui": "~5.0.10",
"expo-tracking-transparency": "~5.2.4",
"expo-updates": "~0.28.17",
"expo-video": "~2.2.2",
"expo-web-browser": "~14.2.0",
"immer": "^10.1.1",
"jotai": "^2.12.5",
"posthog-react-native": "^3.15.2",
"react": "catalog:",
"react-dom": "catalog:",
"react-native": "catalog:",
"react-native-appsflyer": "^6.17.1",
"react-native-gesture-handler": "2.24.0",
"react-native-mmkv": "^3.2.0",
"react-native-pager-view": "6.7.1",
"react-native-paper-tabs": "^0.11.4",
"react-native-reanimated": "^3.17.5",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-svg": "15.11.2",
"react-native-web": "~0.20.0",
"rive-react-native": "^9.3.1",
"string_decoder": "^1.3.0",
"use-immer": "^0.11.0"
},
React Native Skia Version
^2.1.1
React Native Version
^0.79.5
Using New Architecture
- Enabled
Steps to Reproduce
- Init a new expo application
- Install and setup expo router
- Attempt to initialize react native skia web
- locally run web application
Snack, Code Example, Screenshot, or Link to Repository
