Using React Native Skia With Expo: Could not find component config for native component about react-native-skia HOT 9 OPEN

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

from react-native-skia.

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

from react-native-skia.

This is happening in v1.3.6 too

from react-native-skia.

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!

from react-native-skia.

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. :(

from react-native-skia.

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!

from react-native-skia.

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

from react-native-skia.

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

from react-native-skia.

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')],
};
})();
`

from react-native-skia.