SVG's are runtime imported as number instead of React.FC<SvgProps>

[sorenKragh]

I currently updating my app to RN 0.73.8, while doing this I am experiencing an issue with importing SVG's correctly. The imports are runtime recognised to be of type number rather than of type React.FC - but TS does recognize them correctly inside the repository when working with the code. I am expecting issues to be located with the transformer, is there something I might be missing? Using react-native-svg "15.2.0" and react-native-transformer: "1.3.0", I have also tried with transformer 1.5 but to no avail. Any suggestions?

Importing the svg's in src/area/feature/components/mycomponen.ts

import React from 'react';
import { View, StyleSheet, ViewProps } from 'react-native';
import Svg from 'react-native-svg';
import Mysvg from '../assets/icons/Mysvg.svg';

export const MyComponent: React.FC<> = ({}) => {

  return (
    <Svg width={iconSize} height={iconSize} style={styles.fullSvgContainer}>
      <View style={styles.imgContainer} {...extraImgProps}>
         <Mysvg width={imgSize} height={imgSize} fill={imgFillColor} />
      </View>
    </Svg>
  );
};

metro.config.js follows the guidelines and looks like this:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

const config = (async () => {
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer')
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg']
    }
  };
})();

module.exports = mergeConfig(DefaultConfig, config);

[KevinKreps]

Having the same problem here @sorenKragh have you found a solution by now?

[Osamasomy]

same issue+ element type is invalid

[AMUZYZOHO]

OMG I have the same issue and it's so annoying. Imagine after following the docs

[raydenvoldeskine]

Confirm having the same issue with RN 0.73.9, react-native-svg-transformer 1.3.0, react-native-svg 12.3.0 (during RN upgrade). All SVGs in my app stopped working, I am completely blocked.

docs say for TS declarations.d.ts must be extended and it is properly configured for me also (was good before RN upgrade)

[JohnSmall]

Any progress on this ticket? I'm completely blocked too.

[JohnSmall]

Imagine after following the docs

Lol. I think there should be an /s after that. Just so people know it's satire.

In open source documentation it's traditional to leave out essential information. You can always read the code ;-)

[JohnSmall]

Guys. I think we're going to have to solve this one ourselves. This ticket has been open since July 17th, and no one is assigned.

I've no idea where to start. Anyone have a clue?

[JohnSmall]

I solved the problem by setting the react-native-svg-transformer version to 1.5.

I'm using RN 75.2, react-native-svg 13.9.