Imagem não abre no Componente React-native EXPO

Pessoal, estou iniciando no react, peguei um projeto pequeno e simples, mas tem coisas que mesmo fazendo totalmente igual não está rolando, a imagem simplesmente não aparece.

Meu arquivo App.js

import React from 'react';
import { View } from 'react-native';
import Loja from './src/telas/Loja'

export default function App() {
      return (
            <View>
                    <Loja/>
            </View>
      );
}

e meu arquivo Loja.js

import React from "react";
import {Text, View, Image} from 'react-native';
import topo from '../../assets/lojaImg/topo.png';

export default function Loja(){
        return (<View>
                        <Text>antes da imagem</Text>
                                <Image source={topo}/>
                        <Text>depois da imagem</Text>
                    </View>);
}

Estou desenvolvendo em Windows 10, com VSCode atualizados;

Minhas tentativas foram:

1 - Não há erros de digitação pois usei o recurso da tecla tab para autocompletar;

2 - Já tentei trocar o tipo de arquivo de imagem, usei PNG, SVG e JPG, nada;

3 - Removi a tag  para fazer um teste, as tags de texto ficaram em uma única linha;

4 - Analisando a documentação oficial, tentei usar os recursos require e uri, também sem sucesso;

5 - Inspecionei, o elemento aparece, mas com arquivos css atrelados a ele, não faço ideia como apareceu.

Ao que parece, o elemento é reconhecido, mas há uma quantidade grande de arquivos css que devem estar de alguma forma interferindo, mas não faço ideia de como retirá-los de seja onde estiverem.

<img src="/uploads/3X/a/d/ad3de8c8e010d3625038ee5c0277efa513aa4be6.png.webp" alt="image" data-base62-sha1="oIzf26CWRAqvEB7gI7eSVzetF9Y" width="592" height="158">

Através da ferramenta de inspeção do Chrome tentei desativar todos esses css, mas foi em vão, nada mudou.

Conforme orientação que recebi em outro canal, fiz algumas modificações, porém o problema persiste.

Depois de fechar o projeto por algum tempo, voltei a inspeciona-los com a cabeça mais arejada. Acabei detectando que havia uma configuração em uma classe de estilo (aquelas que o framework passa para o navegador sozinho) que está configurado como position: absolute, quando eu o desmarquei a imagem apareceu.

Executei alguns testes com aplicação de estilo e funcionou, agora falta saber como driblar aquele absolute.

3 Respostas

Topicos relacionados