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 solved 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"],
    /* ... */
  }

[knackofabhinav]

Hey @slvvn I tried the method you shared, But i am getting following error:

Now I’m kind of stuck because I previously downgraded the Expo version. However, this caused my Android app to crash since it needed the latest Gradle version, which in turn requires the latest Expo version. :(

[knackofabhinav]

Hey @wcandillon,

Sorry to bother you, but could you please share a workaround or fix for this issue if possible? I’ve been stuck with this for 3 weeks, and it would be really helpful. Once again, thank you for your time!

[Rizasghar]

Hi @slvvn , I added the changes in metro.config.js file, This issue is resolved but app is crashing after 100% bundle complete

[knackofabhinav]

Hey @Rizasghar , I found the fix simply copy paste the metro.config of example in the repo itself. It worked for me!

[Rizasghar]

Hi @knackofabhinav , updated my metro.config file but still have the same error:

metro.config.js `const path = require('path'); const exclusionList = require('metro-config/src/defaults/exclusionList');

const glob = require('glob-to-regexp');

const {getDefaultConfig} = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

const extraNodeModules = { ...defaultConfig.resolver.extraNodeModules, serverShared: path.resolve(__dirname, '../server/src/shared'), }; const watchFolders = [...defaultConfig.watchFolders, path.resolve(__dirname, '../server/src/shared')];

function getBlacklist() { const nodeModuleDirs = [glob(${path.resolve(__dirname, '../package')}/node_modules/*)]; return exclusionList(nodeModuleDirs); }

module.exports = (async () => { const { resolver: {sourceExts, assetExts}, transformer, } = await defaultConfig;

return { transformer: { ...transformer, getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), babelTransformerPath: require.resolve('react-native-svg-transformer'), // use 'react-native-svg-transformer' for 'svg' files }, resolver: { extraNodeModules: new Proxy(extraNodeModules, {get: (_, name) => path.resolve('.', 'node_modules', name)}), blacklistRE: getBlacklist(), assetExts: assetExts.filter((ext) => ext !== 'svg'), // exclude 'svg' from assetExts sourceExts: [...sourceExts, 'svg'], // include 'svg' in sourceExts }, watchFolders: [...defaultConfig.watchFolders, path.resolve(__dirname, '../server/src/shared/common'), path.resolve(__dirname, '../server/src')], }; })(); `

[wcandillon]

The native component mentioned in this issue doesn't exist anymore so I will close this issue for now. But please let me know if you think there will might be an issue here.