Imagem não abre no Componente React-native EXPO

Front-end
#1

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.
image
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.

image
image1366×735 151 KB

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

image
image601×593 22.9 KB

#2

vc quer codar pra mobile ou pra web?

#3

Eu quero codar tanto para mobile quanto web, rodei no Android e o problema foi o mesmo, mas como só sei inspecionar no chrome do pc fui por lá mesmo hehehe.

#4

Ok, eu recomendo que vc não use a versão web do react native, o layout vai ficar bem bizarro e vc vai ter muito mais trabalho.

  • E como vc notou, tem esses css que são feitos justamente pra ficar ok no mobile

Sobre a imagem, se vc colocar um width + height ele funciona:

exemplo:

import TesteImagem from "../../assets/teste2.png";

...

<Image 
     source={TesteImagem} 
     style={{ width: '100%', height: 400, resizeMode: 'contain' }} 
/>

image
image1635×811 221 KB