I am working on a React Native project in Expo and have incorporated the expo TypeScript configuration.
Using "expo install," I added react-native-svg version 9.13.3 to my project.
However, every time I attempt to render the SVG using react-native-svg, I receive an error message.
After examining the source files in the node module, I couldn't locate any files related to the ForeignObject element.
Error:
The following module could not be resolved: `./elements/ForeignObject`, from the file `node_modules/react-native-svg/src/ReactNativeSVG.ts`:
None of these files exist:
* List of potential file options here...
ABI36_0_0facebook::ABI36_0_0React::JSIExecutor::defaultTimeoutInvoker(std::__1::function<void ()> const&, std::__1::function<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > ()>)
More errors listed here...
This is how my component - Star.tsx - is declared:
import * as React from "react";
import { Svg, Defs, Path } from "react-native-svg";
class StarIcon extends React.Component<{}, {}> {
render() {
return (
<Svg width={31.709} height={31.814} viewBox="0 0 31.709 31.814" fill="black">
<Defs />
<Path
d="M15.5,23.7,23.843,29l-2.214-9.99L29,12.288l-9.707-.867L15.5,2l-3.793,9.422L2,12.288,9.371,19.01,7.157,29Z"
transform="translate(0.355 0.677)"
/>
</Svg>
)
}
};
export default StarIcon;
I suspect the issue might be related to the TypeScript configuration. Interestingly, when I replicated this icon in a JavaScript-based react-native project, it worked without any issues.
If anyone has insights into why this error is occurring or can offer assistance, please let me know. Thank you!
Best regards.