Comments (9)
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.
Related Issues (20)
- `ImageSVG` draws a black ellipse if a linear gradient is specified HOT 8
- `fmt: ImageFormat.WEBP` for `encodeToBytes` and `encodeToBase64` can't compress image very well HOT 4
- handleTouchEvent called after Canvas is out of focus HOT 4
- Html <canvas> does not resize correctly with the window
- React Native Skia Headless Documentation HOT 2
- pointerEvents="none" on <Canvas /> not working on android? HOT 1
- Example in Paragraph docs doesn't compile HOT 3
- SVG's from react-native-svg don't appear in skia snapshots (makeImageFromView) only Android HOT 4
- makeImageSnapshot crashes Android app
- Overlay blend mode doesn't work as it works in Figma HOT 1
- LineHeight property on Paragraph HOT 2
- Difficulty Implementing Introductory Graph Examples and Reduced Features
- Paragraph.getHeight() crashes on iOS with large font sizes
- React Native 0.75 compatibility HOT 12
- Is headless support on Android and iOS?
- Crash SkPathPriv::IsSimpleRect on iOS
- performance request: support to render more than 500 circles smoothly even when user do pan or pinch.
- Image dispose cannot immediately release memory , i think it has some memory leak. HOT 1
- not support react-native-0.75 HOT 2
- problem occurred configuring project ':shopify_react-native-skia'. on Android HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-skia.