Unhandled Rejection (InvalidCharacterError): Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/....svg') is not a valid name.

src/index.js

import React from 'react'
import { View } from 'react-native'
import User from '../assets/svg/User.svg'

const Index = () => {
    return (
       <View>
           <User width={40} height={40} fill='red'/>
       </View>
    )
}

export default Index

metro.config.js

const { getDefaultConfig } = require("@expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

declarations.d.ts

declare module "*.svg" {
    import React from 'react';
    import { SvgProps } from "react-native-svg";
    const content: React.FC<SvgProps>;
    export default content;
  }

.svgrrc

{
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

app.json

{
  "expo": {
    "name": "Project",
    "slug": "Project",
    "version": "3.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#007B5E"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "android": {
      "package": "com.ico.app.teste",
      "googleServicesFile": "./google-services.json",
      "useNextNotificationsApi": true,
      "versionCode": 100,
      "permissions": [
        "ACCESS_COARSE_LOCATION",
        "ACCESS_FINE_LOCATION"
      ]
    },
    "ios": {
      "supportsTablet": true
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": [
        "expo.ts",
        "expo.tsx",
        "expo.js",
        "expo.jsx",
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "wasm",
        "svg"
      ]
    }
  }
}

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/montserrat": "^0.1.0",
    "@react-native-async-storage/async-storage": "^1.13.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "6.0.0",
    "@react-native-community/viewpager": "5.0.11",
    "@react-navigation/bottom-tabs": "^5.9.0",
    "@react-navigation/native": "^5.7.2",
    "@react-navigation/stack": "^5.8.0",
    "@types/styled-components-react-native": "^5.1.1",
    "axios": "^0.19.2",
    "expo": "~41.0.1",
    "expo-cli": "^3.23.1",
    "expo-facebook": "~11.0.5",
    "expo-font": "~9.1.0",
    "expo-linear-gradient": "~9.1.0",
    "expo-linking": "~2.2.3",
    "expo-location": "lucassouza16/expo-location#latest",
    "expo-notifications": "~0.11.6",
    "expo-status-bar": "~1.0.4",
    "git": "^0.1.5",
    "global": "^4.4.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-masked-text": "^1.13.0",
    "react-native-reanimated": "~2.1.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.0.0",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.2.3",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/jest": "^26.0.21",
    "@types/react": "^17.0.3",
    "@types/react-native": "^0.64.0",
    "@types/react-test-renderer": "^17.0.1",
    "babel-preset-expo": "^8.3.0",
    "typescript": "^4.2.3"
  },
  "private": true
}

Expo CLI 4.4.3 environment info: System: OS: Windows 10 10.0.19042 Binaries: Node: 14.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - C:\Users\lucas\AppData\Roaming\npm\yarn.CMD npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6626763 npmPackages: expo: ~41.0.1 => 41.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 Expo Workflow: managed

[lucassouza16]

I created a temporary solution to the problem, whoever wants to try it feels free.

https://github.com/lucassouza16/react-native-svg-transformer-fix-expo

[kristerkari]

@lucassouza16 @cvburgess @mattgabor

I had a look at adding the Webpack config for Expo, and I managed to find a solution from the Expo repo (https://github.com/expo/expo/issues/6660#issuecomment-667991626) that is kind of working.

The only bigger problem that I ran into is that the newest versions of SVGR only support Webpack v5, but Expo is still using Webpack v4. I managed to fix that in hacky way by using an older 5.5.0 version of @svgr/webpack, but forcing the other @svgr/* packages to be version 6.1.2.

If you want to have a look at an example, you can try out locally the changes here: https://github.com/kristerkari/react-native-svg-expo-example/pull/1/files