Open RemyMachado opened 2 years ago
Same. Temporarily solved it by creating a react-native-svg.d.ts
file and extending the inferface.
import 'react-native-svg';
declare module 'react-native-svg' {
export interface SvgProps {
xmlns?: string;
xmlnsXlink?: string;
}
}
Same. I temporarily solved it by creating a
react-native-svg.d.ts
file and extending the inferface.import 'react-native-svg'; declare module 'react-native-svg' { export interface SvgProps { xmlns?: string; xmlnsXlink?: string; } }
Please note that making the attributes required, typescript will complain about them being overwritten by the props destructuring that happens on the root <Svg ../> node. That suggests that props contains those attributes, but I couldn't find them anywhere in the code.
that's cool. Let me ask, where did you place your react-native-svg.d.ts file ?
@brianwachira You can place it anywhere you want, as typescript will pick all the declaration files it finds in the project.
Alright. I have done that. Now I am getting an error about
None of these files exist:
- node_modules/react-native-svg/src/elements/Circle(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
- node_modules/react-native-svg/src/elements/Circle/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
Currently figuring out where the problem could be
None of these files exist:
* node_modules/react-native-svg/src/elements
fixed this issue by reinstalling react-native-svg
I use Nextjs and load SVG as component but maybe this is useful for you:
add this to custom.d.ts
or your config file, it worked for me :
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
const content: any;
const viewBox: string;
const width: string;
const height: string;
export default content;
export default src;
}
import 'react-native-svg'; declare module 'react-native-svg' { export interface SvgProps { xmlns?: string; xmlnsXlink?: string; } }
it will be in root folder
Doesn't the namespace have actual meaning? Couldn't it impact it's rendering or relationship with other elements? Or does this not matter given it's being used in a native environment?
https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course
@demedos thanks...
Same. Temporarily solved it by creating a
react-native-svg.d.ts
file and extending the inferface.import 'react-native-svg'; declare module 'react-native-svg' { export interface SvgProps { xmlns?: string; xmlnsXlink?: string; } }
a bit modified...
//svg.types.ts
import {type SvgProps} from 'react-native-svg';
export interface ISvgProps extends SvgProps {
xmlns?: string;
xmlnsXlink?: string;
xmlSpace?: string;
}
//svgComp.tsx
const SvgComp= (props: ISvgProps) => (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={250}
height={250}
viewBox="0 0 250 250"
xmlSpace="preserve"
{...props}>
//....
...//
</Svg>
);
Wondering why this xmlns
, pretty common, property was not added to the library itself? 👀
`import {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG';
const MainLogo: React.FC
) }`
By importing this
import {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG resolve the issues
I'm surprised I couldn't find any issue mentioning it. The 'xmlns' attribute triggers a typescript error (TS2322).