react-native-svg-transformer: react-native-svg-transformer not working with expo
“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:

About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 16 (9 by maintainers)
Commits related to this issue
- Add a mode to create react-native svg using expo Using an ejected ExpoKit after version 32 prevents `import Svg from 'react-native-svg';` from working, and also prevents the developer from adding 're... — committed to edpaget/svgr by edpaget 5 years ago
- feat: add expo option (#289) Using an ejected ExpoKit after version 32 prevents `import Svg from 'react-native-svg';` from working, and also prevents the developer from adding 'react-native-svg' as... — committed to gregberge/svgr by edpaget 5 years ago
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.