react-native-svg-transformer not working with expo
See original GitHub issue“react-native-svg”: “8.0.10”, (inside expo’s package.json) react-native “version”: “0.57.1” expo “version”: “32.0.6” “react-native-svg-transformer”: “^0.12.1”
metro.config.js:
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
console.log('source exts: ', sourceExts);
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
packagerOpts
inside app.json:
{
"expo": {
"packagerOpts": {
"config": "metro.config.js"
},
"name": "Plogalong",
"slug": "plogalong",
"privacy": "public",
"sdkVersion": "32.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
metro.config.js
and app.json
are at the same level.
Inside the component:
import { BackPacker } from '../assets/icons/backpacker.svg';
This is resulting in the following error:
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:16 (9 by maintainers)
Top Results From Across the Web
Use SVGs - Expo Documentation
React Native SVG transformer allows compile-time transformation to make SVG files compatible with React. Follow the installation steps to configure your Expo ......
Read more >react-native-svg-transformer not working with the metro.config ...
I tried restarting with npm start -- --reset-cache and after playing around with the config file, I noticed that it was the async...
Read more >Working with SVGs in React Native - OpenReplay Blog
* as React from "react"; · Svg, { Path } · "react-native-svg" · const Loader = (props) => ( <Svg ; { StatusBar...
Read more >react-native-svg-transformer examples - CodeSandbox
Learn how to use react-native-svg-transformer by viewing and forking ... kiyohken2000/ReactNative-Expo-Firebase-Boilerplate-v2 ... Issues Count178. Stars908.
Read more >How to import SVG files in React Native using react-native-svg
Rendering SVGs in mobile apps is not as simple as on the web, where you can use SVG directly as an image source...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I created a new Expo project, installed
react-native-svg-transformer
, added Metro config, and added the code to import an SVG image. It’s working for me at least.Here’s the repo if you want to have a look at the setup: https://github.com/kristerkari/react-native-svg-expo-example
I haven’t had time to look at it yet because I have been really busy with things this week, but I’ll try to have a look at it this weekend.