diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts index b6d90d9a..9fe80b4c 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts @@ -26,4 +26,29 @@ describe('plugin', () => { ;" `) }) + + it('should add deal with type imports properly', () => { + const code = transform( + ` + import Svg from 'react-native-svg'; + import type { SvgProps } from "react-native-svg"; + + const ComponentSvg = () => ; + `, + { + plugins: [ + '@babel/plugin-syntax-jsx', + ['@babel/plugin-syntax-typescript', { isTSX: true }], + plugin, + ], + configFile: false, + }, + )?.code + + expect(code).toMatchInlineSnapshot(` + "import Svg, { G } from 'react-native-svg'; + import type { SvgProps } from "react-native-svg"; + const ComponentSvg = () => ;" + `) + }) }) diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.ts b/packages/babel-plugin-transform-react-native-svg/src/index.ts index 41cd4301..6c63b203 100644 --- a/packages/babel-plugin-transform-react-native-svg/src/index.ts +++ b/packages/babel-plugin-transform-react-native-svg/src/index.ts @@ -79,9 +79,13 @@ const plugin = () => { const importDeclarationVisitor = { ImportDeclaration(path: NodePath, state: State) { + const isNotTypeImport = + !path.get('importKind').hasNode() || + path.node.importKind == null || + path.node.importKind === 'value' if ( path.get('source').isStringLiteral({ value: 'react-native-svg' }) && - !path.get('importKind').hasNode() + isNotTypeImport ) { state.replacedComponents.forEach((component) => { if (