React-Native with TypeScript breaks on typecheck #465
Description
🐛 Bug Report
If I use the flags --typescript together with --native the generated code contains type check errors.
The props argument is annotated as "React.SVGProps" this is ok for react, but not 'react-native-svg' which uses the prop type 'SvgProps'
To Reproduce
transform using
npx @svgr/cli --filename-case camel --typescript --native run tsc on the file
Expected behavior
On the options "typescript" and "native", the "props" should be of type "SvgProps" from 'react-native-svg'
I was able to "workaround" this by using a costum template:
function defaultTemplate(
{ template, types: t },
opts,
{ imports, interfaces, componentName, props, jsx, exports },
) {
props[0] = {
...props[0],
typeAnnotation: t.typeAnnotation(t.genericTypeAnnotation(t.identifier('SvgProps')))
}
const rnsvgImport = imports.filter(i => i.source.value === 'react-native-svg');
if (rnsvgImport && rnsvgImport.length > 0) {
rnsvgImport[0].specifiers.push(
t.importSpecifier(t.identifier('SvgProps'), t.identifier('SvgProps')));
}
[...]
`
}
module.exports = defaultTemplate;## System:
- OS: Windows 10 10.0.19042
- CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
- Memory: 12.85 GB / 31.96 GB
## Binaries:
- Node: 12.18.2 - C:\Program Files\nodejs\node.EXE
- Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
- npm: 6.9.0 - C:\Program Files\nodejs\npm.CM