diff --git a/src/cli/__snapshots__/index.test.js.snap b/src/cli/__snapshots__/index.test.js.snap index 35984786..0f5dd9fb 100644 --- a/src/cli/__snapshots__/index.test.js.snap +++ b/src/cli/__snapshots__/index.test.js.snap @@ -45,6 +45,8 @@ exports[`cli --native 1`] = ` "import React from \\"react\\"; import Svg, { Path } from \\"react-native-svg\\"; +// SVGR has dropped some elements not supported by react-native-svg: title + const One = props => ( diff --git a/src/h2x/toReactNative.js b/src/h2x/toReactNative.js index d3033083..5b366625 100644 --- a/src/h2x/toReactNative.js +++ b/src/h2x/toReactNative.js @@ -30,7 +30,8 @@ const toReactNative = () => ({ const component = elementToComponent[path.node.name] if (component) { path.node.name = component - state.reactNativeSvgReplacedComponents = state.reactNativeSvgReplacedComponents || new Set() + state.reactNativeSvgReplacedComponents = + state.reactNativeSvgReplacedComponents || new Set() state.reactNativeSvgReplacedComponents.add(component) return } @@ -38,7 +39,7 @@ const toReactNative = () => ({ // Remove element if not supported if (!componentToElement[path.node.name]) { state.unsupportedComponents = state.unsupportedComponents || new Set() - state.unsupportedComponents.add(component) + state.unsupportedComponents.add(path.node.name) path.remove() } }, diff --git a/src/transforms/wrapIntoNativeComponent.js b/src/transforms/wrapIntoNativeComponent.js index c82697cb..de792b0b 100644 --- a/src/transforms/wrapIntoNativeComponent.js +++ b/src/transforms/wrapIntoNativeComponent.js @@ -1,13 +1,27 @@ -const componentsToImport = components => +const componentsToList = components => [...components].filter(component => component !== 'Svg').join(', ') +const logUnsupportedComponents = components => { + if (!components.size) return '' + return ` +// SVGR has dropped some elements not supported by react-native-svg: ${componentsToList( + components, + )} +` +} + export default (opts = {}) => (code, state) => { - const { reactNativeSvgReplacedComponents = new Set() } = state + const { + reactNativeSvgReplacedComponents = new Set(), + unsupportedComponents = new Set(), + } = state return `import React from 'react' - import Svg, { ${componentsToImport( + import Svg, { ${componentsToList( reactNativeSvgReplacedComponents, )} } from 'react-native-svg'; + ${logUnsupportedComponents(unsupportedComponents)} + const ${state.componentName} = (${opts.expandProps ? 'props' : ''}) => ${code}