Erro ao adicionar o componente Topo do produtor

quando tentei adicionar o Componente Topo do produtor, me deparei com o seguinte erro:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number

depois de horas, descobri que o problema estava nas chamadas dos arquivos de imagem .svg na chamada ->

<Gradiente width={ largura } height={ (130 / 360 * largura) } style={estilos.gradiente} />  `

e ->

<VoltarSVG color="white" style={estilos.voltar} />`

presente na função ->

export default function Topo({ titulo, imagem = topo, altura = ALTURA_PADRAO }) {
  const estilos = funcaoEstilos(altura);
  console.log("\"" + largura + "\"")
  return <>
    <Image source={imagem} style={estilos.topo} />
     <Gradiente width={ largura } height={ (130 / 360 * largura) } style={estilos.gradiente} />  

    <Texto style={estilos.titulo}>{titulo}</Texto>
    <TouchableOpacity
      onPress={() => { }}
      style={estilos.botaoVoltar}>
     <VoltarSVG color="white" style={estilos.voltar} />
    </TouchableOpacity>
  </>

}

pesquisei na internet e vi que teria que instalar a biblioteca chamada "react native svg" -> https://www.npmjs.com/package/react-native-svg "npm install react-native-svg"

e depois a biblioteca "npm install --save-dev react-native-svg-transformer" -> https://www.npmjs.com/package/react-native-svg-transformer

depois deve adicionar algumas configurações:

quando o typescript for utilizado deve ser criado um arquivo chamado declarations.d.ts na raiz do projeto e colar o codigo do passo 3 da documentação do svg transformer // svg transformer para typescript-------------------------------

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

//-----------------------------------------------------------------------------

para javascript deve ser adicionado no arquivo metro.config.js o codigo do passo 3 da documentação do svg transformer For React Native v0.59 or newer

// svg transformer para javascript-------------------------------

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

// -----------------------------------------------------------------------------

depois de fazer essas alterações o problema foi resolvido, espero que seja útil