Shape.tsx: Cannot read property 'name' of undefined

[jacquesdev]

Question

I'm getting an error that is driving me nuts. Have tried searching for an answer elsewhere, and have not seen this issue anywhere. I'm probably doing something very obviously wrong, so I thought I'd just add this screenshot since this is the error I am getting

I am simply trying to get to the point where I can display a locally saved SVG image in my iOS app. I have installed this plugin, as well as react-native-svg-transformer, with all the settings I could think mentioned. Since the error is complaining about this plugin, I thought I would start off here. I tried with my initial image, and thought maybe the image as wrong, so tried an svg file from wikipedia, but I just never get past this error, when I try to render the image. What is worse is that I don't see any entries about this error, so I have no idea what to try. Any ideas? Does anyone know what I'm doing wrong?

I don't even see a property called 'name' in Shape.tsx, so I'm guessing this prop is somehow inherited, but not understanding much about SVG, I am not sure how to proceed.

The test.svg file is the svg file in the first article of the wikipedia entry on svg files, to confirm I am using a valid file.

package.json

  "react-native": "0.63.3",  
  "react-native-svg": "^12.1.0",
  "react-native-svg-transformer": "^0.14.3",

component

import Image from './test.svg' 
<Image width={50} height={50} />

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'],
    },
  }
})()

[altany]

Any update on this? I tried installing react-native-svg and I am also getting this error.

[vdanylov]

The same, update react-native-svg-transform, cause similar problem

[bohdanprog]

Hello @jacquesdev,
If you are still experiencing problems, please feel free to open a new one.
Thank you.