I have a React Native project created with Expo. I also used the expo TypeScript configuration.
I installed react-native-svg using "expo install." I currently have version 9.13.3 installed.
Whenever I try to render the SVG using react-native-svg I get this error.
I've looked through the src files of the node module and can't find any files for the ForeignObject element.
Error:
Unable to resolve module `./elements/ForeignObject` from `node_modules/react-native-svg/src/ReactNativeSVG.ts`:
None of these files exist:
* node_modules/react-native-svg/src/elements/ForeignObject(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
* node_modules/react-native-svg/src/elements/ForeignObject/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
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> > ()>)
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> > ()>)
B9D95EAB-9269-367D-B2F4-C2B45821A32D
B9D95EAB-9269-367D-B2F4-C2B45821A32D
B9D95EAB-9269-367D-B2F4-C2B45821A32D
7519E999-1053-3367-B9D5-8844F6D3BDC6
7519E999-1053-3367-B9D5-8844F6D3BDC6
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
Exponent
7B531A15-3E73-3185-90E2-B88D9476DA5E
Here is my component declaration - Star.tsx:
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'm not sure what the issue is, other than it might have something to do with the TypeScript config. I created the same icon in a JavaScript react-native project and it worked fine.
If anyone knows why I'm getting this error or could provide any help I'd greatly appreciate it!
Thanks.
