0

Estoy tratando de crear un componente que permita utilizar file.svg en react native con react-native-svg-transform, cuando el path en el import está de manera estica funciona bien, el problema es cuando le asigno una variable para que sea dinámico, el import no reconoce esa variable y arroja el el siguiente error.introducir la descripción de la imagen aquí

este es el código hecho en TypeScript

import { View } from 'react-native';
import React, { Suspense} from 'react';

interface Props {
    name: string,
    path: string
}
export const ImageSvg = (props: Props) => {

    const Component = React.lazy(() => import('../assets/'+props.name+'.svg'));

     return (
         <View>
             <Suspense fallback={null}>
                 <Component/>
             </Suspense>
         </View>
     )
}
3
  • El import de lazy debería ser para un componente que tenga un elemento img para mostrar la imagensvg, pero aquí estas tratando de importar la imagen svg como un si fuera un componente. No estoy seguro de esto, ya que no veo un ejemplo parecido en la doc
    – g.4
    el 18 mar. 2022 a las 2:33
  • 1
    Estoy utilizando react-native-svg-trasnform, con en ello me permite usar SVG como un componente, el problema es que la ruta tiene que ser estática para que se pueda renderizar, si hay una ruta dinámica no funciona
    – Kali Kali
    el 18 mar. 2022 a las 15:28
  • Bien, puse ese dato en la pregunta. ¿Y que tal si pones tu carpeta assets en el folder public? Por ejemplo con el template create-react-app se puede hacer uso de variables globales para comunicarse con el path public y parece ser estático. Saludos
    – g.4
    el 18 mar. 2022 a las 15:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.