SvgUri from react-native-svg is always undefined when importing

1k Views Asked by At

In a react native application, the import for SvgUri from react-native-svg always returns undefined throwing the following error:

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I really don't know what I am doing wrong anymore. I tried simplifying the code to the most basic form and still I am running into this issue.

For my example I have created just one component with only the necessary image and only render this component. That code looks like this:

import { SvgUri } from 'react-native-svg';

export default () => {
  console.log(SvgUri);

  return (
    <SvgUri
      width="100%"
      height="100%"
      uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
    />
  );
};

The console.log always returns undefined and crashes the app, while this example is almost taken from the official documentation. I use the following versions of packages:

  • react-native: 0.64.3
  • react: 17.0.1
  • react-native-svg: 12.1.1 (also tried with 12.3.0)
  • expo: 44.0.0

Does anyone know what I am doing wrong?

0

There are 0 best solutions below