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?