Problem ao renderizar svg

Meu componente de topo não renderiza devido aos svgs. Se eu importo e usos esses caras como imagem, dá certo, mas como componente não. Código que funciona:

import React from 'react';
import {useNavigation} from '@react-navigation/native';
import {Image, TouchableOpacity} from 'react-native';

import Texto from '../Texto';

import gradiente from '../../../assets/gradiente.svg';
import topo from '../../../assets/topo.png';
import voltarSVG from '../../../assets/voltar.svg';

import {styles as stylesFunction} from './styles';

const ALTURA_PADRAO = 270;

export default function Topo({titulo, imagem = topo, altura = ALTURA_PADRAO}) {
  const navigation = useNavigation();
  const styles = stylesFunction(altura);

  return (
    <>
      <Image source={imagem} style={styles.topo} />
      <Image source={gradiente} style={styles.gradiente} />

      <Texto style={styles.titulo}>{titulo}</Texto>
      <TouchableOpacity
        onPress={() => {
          navigation.goBack();
        }}
        style={styles.botaoVoltar}>
        <Image source={voltarSVG} style={styles.voltar} />
      </TouchableOpacity>
    </>
  );
}

Código que não funciona => retorna o erro: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

Mas não é um erro de tipo de props por exemplo, o problema é os svgs.

import React from 'react';
import {useNavigation} from '@react-navigation/native';
import {Dimensions, Image, TouchableOpacity} from 'react-native';

import Texto from '../Texto';

import Gradiente from '../../../assets/gradiente.svg';
import topo from '../../../assets/topo.png';
import VoltarSVG from '../../../assets/voltar.svg';

import {styles as stylesFunction} from './styles';

const largura = Dimensions.get('screen').width;
const ALTURA_PADRAO = 270;

export default function Topo({titulo, imagem = topo, altura = ALTURA_PADRAO}) {
  const navigation = useNavigation();
  const styles = stylesFunction(altura);

  return (
    <>
      <Image source={imagem} style={styles.topo} />
      <Gradiente
        width={largura}
        height={(130 / 360) * largura}
        style={styles.gradiente}
      />
      <Texto style={styles.titulo}>{titulo}</Texto>
      <TouchableOpacity
        onPress={() => {
          navigation.goBack();
        }}
        style={styles.botaoVoltar}>
        <VoltarSVG color="white" style={styles.voltar} />
      </TouchableOpacity>
    </>
  );
}

meu package.json:

{
  "name": "projeto",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1",
    "react-native-svg": "^12.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}