Problem with `react-native-svg` in Expo app

Question

I'm encountering an issue while using the react-native-svg library in my Expo app. The error message I'm seeing is:

View config getter callback for component RNSVGPath must be a function (received undefined).

Environment:

Expo SDK version: ~49.0.15 react-native-svg version: 13.9.0 React Native version: 0.72.6

The problem is triggered just after using SVG icon component:

import PropTypes from "prop-types";
import { React } from "react";
import { View } from "react-native";

import styles from "./styles";
import ProgressBar from "../ProgressBar";
import IconClose from "../icons/IconClose";

const Header = ({ progress }) => {
  return (
    <View style={styles.container}>
      <IconClose />
      <ProgressBar progress={progress} />
    </View>
  );
};

Header.propTypes = {
  progress: PropTypes.number,
};

export default Header;

SVG icon component:

import React from "react";
import { View } from "react-native";
import Svg, { Path } from "react-native-svg";

const IconClose = (props) => {
  return (
    <View>
      <Svg
        width={30}
        height={30}
        viewBox="0 0 30 30"
        fill="none"
        stroke="#000000"
        stroke-width={4}
        stroke-linecap="round"
        stroke-linejoin="round"
        {...props}
      >
        <Path d="M28,2L2,28 M2,2l26,26" />
      </Svg>
    </View>
  );
};

export default IconClose;

I appreciate any insights or suggestions on how to resolve this issue. Thank you!

Answer 1

please see if this one might help you to resolve the issue: https://github.com/callstack/repack/issues/396#issuecomment-1633023380