React-Native with TypeScript breaks on typecheck

[Ztarbox]

🐛 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

[open-collective-bot]

Hey @Ztarbox 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[gregberge]

Hello @Ztarbox, it is a bug, do you want to contribute with a PR on it?

[Ztarbox]

I'll try

[jgo80]

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;

@Ztarbox thank you for the workaround with the custom template, works very well! 😃

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lucasmotta]

Still an issue and I don't believe it's stale.

[Ztarbox]

PR is waiting...