react-native-svg: Invariant Violation: View config not found for name

Bug

Screenshot_1563544674

React native info output:

System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
    Memory: 1.40 GB / 11.60 GB
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  IDEs:
    Android Studio: 3.3 AI-182.5107.16.33.5314842
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: ^0.60.4 => 0.60.4

Library version: 9.5.3

Steps To Reproduce

Before: yarn add react-native-svg yarn add react-native-svg-transformer -D

After Enable hermes yarn add babel-plugin-inline-import -D

Describe what you expected to happen:

Show icons

Reproducible sample code

myComponent.js

import React from "react";
import { Platform } from "react-native";

import IconHome from "./../imgs/icon/home.svg";
export const Home = props => ( <IconHome { ...props } width={22} height={22} /> );

…

screen.js

import { Search, Genero, MinhasMusicas, Home } from "./../components/Icon";
<Home key={1} />

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 20 (3 by maintainers)

Most upvoted comments

Same issue While running svg with transformation

package.json "react-native": "0.59.9", "react-native-svg-transformer": "^0.13.0",, "react-native-svg": "^9.9.4",

Metro.config.js `const { getDefaultConfig } = require(“metro-config”);

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

index.js

import { Bower } from "./bower.svg";
<Bower width={120} height={40} /> Not working???

if I use with SvgXml it works.

import { SvgXml } from "react-native-svg";
 <SvgXml width="200" height="200" xml={Bower} /> Working

waleedarshad on Oct 14, 2019