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:

[kristerkari]

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

[kristerkari]

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.