Creé un componente simple que envolvía SVG como se muestra a continuación:

 import React from 'react'; import CheckOutline from '../../assets/svg/check-outline.svg'; import Check from '../../assets/svg/check.svg'; interface ISvgIconProps extends SvgProps { name: 'check-outline' | 'check'; } const SvgIcon: React.FC<ISvgIconProps> = ({name, ...args}) => { const nameMap = { 'check-outline': CheckOutline, check: Check, }; const SvgComp = nameMap[name]; return <SvgComp {...args} />; }; export default SvgIcon;

Y este componente se puede usar en otro componente como el siguiente:

 import SvgIcon from '../svg-icon'; ... <SvgIcon name="check" width={24} height={24} fill={colors.PRIMARY_DARK} onPress={() => navigation.goBack()} />

Todo funciona muy bien, puedo ver el ícono SVG que se representa. Ahora me encontré con el siguiente problema cuando probé la prueba de instantáneas:

 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `SvgIcon`. at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16180:21) at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16208:15) at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5358:23) at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5418:35) at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7984:28) at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8810:5) at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9966:16) at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12) at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5) at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)

ACTUALIZACIONES

En lugar de return <SvgComp {...args} />; , traté de crear el elemento manualmente pero todavía fallé:

 return React.createElement(SvgComp, {...args}, null);

¿Se pregunta si alguien tiene alguna idea al respecto?