Using React Native Skia With Expo: Could not find component config for native component

[geekabhinavp]

Description

I've recently updated several packages, including upgrading React Native from version 0.71 to 0.74. I'm currently using Expo alongside react-native-skia version 1.2.3. After performing these updates, I encountered an issue that occurred as soon as the app launched. (As suggested by expo-doctor)

error: node_modules/@shopify/react-native-skia/lib/module/specs/SkiaPictureViewNativeComponent.js: /Users/abhinavpatel/Sites/lumica-frontend/node_modules/@shopify/react-native-skia/lib/module/specs/SkiaPictureViewNativeComponent.js: Could not find component config for native component

Version

1.2.3

Steps to reproduce

App launch itself is crashing!

Snack, code example, screenshot, or link to a repository

[geekabhinavp]

Update: Even tried with v1.3.4 which is the latest package. still getting same error.

[Odame]

This is happening in v1.3.6 too

[geekabhinavp]

From what I understood so far:

My current package.json is:

 "expo": "~48.0.21",
    "expo-av": "~13.2.1",
    "expo-background-fetch": "~11.1.1",
    "expo-build-properties": "~0.6.0",
    "expo-dev-client": "~2.2.1",
    "expo-haptics": "~12.2.1",
    "expo-linear-gradient": "~12.1.2",
    "expo-localization": "~14.1.1",
    "expo-screen-orientation": "~5.1.1",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-system-ui": "~2.2.1",
    "expo-web-browser": "~12.1.1",

Whenever I run expo update we get to these versions of expo and the app crashes and get the error.

"expo": "^51.0.0",
    "expo-av": "~14.0.5",
    "expo-background-fetch": "~12.0.1",
    "expo-build-properties": "~0.12.3",
    "expo-dev-client": "~4.0.18",
    "expo-haptics": "~13.0.1",
    "expo-linear-gradient": "~13.0.2",
    "expo-localization": "~15.0.3",
    "expo-screen-orientation": "~7.0.5",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.6",
    "expo-web-browser": "~13.0.3"

So for now I have reverted back to my previous expo version as the latest is not supported. Hope it gets resolved soon!

[slvvn]

In my case adding react-native to the resolverMainFields in the Metro config seemed to have solve the issue.

  resolver: {
    /* ... */
    resolverMainFields: ["react-native", "browser", "main"],
    /* ... */
  }

I had the issue of not correctly extending the default config. As a result the defaultConfig.resolver properties were left out, which caused the resolverMainFields to be missing.

  resolver: {
+  ...defaultConfig.resolver,
    resolverMainFields: ["react-native", "browser", "main"],
    /* ... */
  }