Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React-Native with TypeScript breaks on typecheck

See original GitHub issue

🐛 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<SVGSVGElement>” 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

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

jgo80commented, Aug 26, 2020

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! 😃

0reactions

Ztarboxcommented, Oct 26, 2020

PR is waiting…