react-native-svg-transformer not working with expo

[ps37]

"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]

Thanks @ps37!

I need to check what the compatibility with Expo is. Expo has its own version of react-native-svg, so there might be some issues with that.

Let me try it out and I'll get back to you!

[ps37]

Thanks @ps37!

I need to check what the compatibility with Expo is. Expo has its own version of react-native-svg, so there might be some issues with that.

Let me try it out and I'll get back to you!

@kristerkari
Thanks for getting back!
The react-native-svg in Expo's node modules works fine when I try to use it to render primitives like circle and rectangle. But the svg-transformer doesn't seem to find it.

[kristerkari]

But the svg-transformer doesn't seem to find it.

I think that the import is different when Expo is used, so it might be that there needs to be some code to detect if Expo is used an import the library from a different location.

[ps37]

@kristerkari

there needs to be some code to detect if Expo is used an import the library from a different location.

Hey, I am just wondering if there is any update on this from your side? I don't have a clue about how to do this!

[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.

[ps37]

Hey @kristerkari,

Just wondering if you have any update on this?

Thank you.

[kristerkari]

@ps37 I'm looking at it currently. I'll let you know what the situation is after testing out a few things.

[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

[ps37]

Thanks, I will check it out and let you know.

[edpaget]

I ran into this same issue with an ejected ExpoKit app. It doesn't seem like import Svg from 'react-native-svg works at all after ejecting and I'm unable to include react-native-svg as a dependency.

I ended up patching the [loader]
(https://github.com/smooth-code/svgr/tree/master/packages/babel-plugin-transform-react-native-svg) to make it import { Svg } from 'expo' and transform components into Svg.Circle. I put in a pull request here: gregberge/svgr#289

[kristerkari]

I guess that the issues with Expo are now solved? Let's re-open this issue if something new comes up.