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 (