Imagem não aparece ao lado do Título | React Native: criando um app

Na visualização apliquei o estilo conforme orientado na aula mas a imagem conmtinua aparecem por cima do texto e não ao lado. Deixo baixo o código desenvolvido:

import React from "react";
import { Text, Image, StyleSheet, Dimensions, View } from 'react-native';

import topo from '../../assets/topo.png';
import logo from '../../assets/logo.png';

const width = Dimensions.get('screen').width;

export default function Cesta() {
    return <>
            <Image source={topo} style={estilos.topo} />
            <Text style={estilos.titulo}>Detalhe da Cesta</Text>

            <View style={estilos.cesta}>
                <View styles={estilos.fazenda}>
                    <Image source={logo} style={estilos.imgemFazenda} />
                    <Text style={estilos.nome}>Cesta de Verduras</Text>
                </View>
                <Text style={estilos.nomeFazenda}>Jenny Jack Farm</Text>
                <Text style={estilos.descricao}>Uma cesta diretamente da fazenda para sua mesa</Text>
                <Text style={estilos.preco}>R$ 40,00</Text>
            </View>
        </>
}

const estilos = StyleSheet.create({
    topo : {
        width: "100%",
        height: 578 / 768 * width
    },
    titulo: {
        width: "100%",
        position: "absolute",
        textAlign: "center",
        fontSize: 16, 
        lineHeight: 26,
        color: "#fff",
        padding: 50
    },
    cesta: {
        paddingVertical: 8,
        paddingHorizontal: 16
    },
    fazenda: {
        flexDirection: 'row', 
        paddingVertical: 12,
        marginLeft: 12
    },
    imgemFazenda: {
        width:32, 
        height:32,

    },
    nomeFazenda: {
        fontSize: 16,
        lineHeight: 26
    },
    nome: {
        fontSize:26,
        lineHeight:42,
        color:"#464646",
        fontWeight: "bold"
    },
    descricao: {
        color: "#A3A3A3",
        fontSize: 16,
        lineHeight: 26,
    },
    preco: {
        color: "#2a9f85", 
        fontWeight: "bold", 
        fontSize:26, 
        lineHeight: 42, 
        marginTop:8
    }
});

Fala, Paulo! Tudo certo ?

Bem chato esse problema que você está tendo, mas vamos tentar corrigi-lo logo para que você possa voltar aos seus estudos, Beleza ?

A primeira correção que podemos fazer para ficar igual ao que a instrutora está fazendo, é mudar um pouco a organização dos elementos dentro da Cesta. O código que você mandou está da seguinte forma:

export default function Cesta() {
  return <>
          <Image source={topo} style={estilos.topo} />
          <Text style={estilos.titulo}>Detalhe da Cesta</Text>

          <View style={estilos.cesta}>
              <View styles={estilos.fazenda}>
                  <Image source={logo} style={estilos.imgemFazenda} />
                  <Text style={estilos.nome}>Cesta de Verduras</Text>
              </View>
              <Text style={estilos.nomeFazenda}>Jenny Jack Farm</Text>
              <Text style={estilos.descricao}>Uma cesta diretamente da fazenda para sua mesa</Text>
              <Text style={estilos.preco}>R$ 40,00</Text>
          </View>
      </>
}

É mais interessante a View de fazenda conter apenas informações daquela fazenda, então podemos colocar a frase Cesta de Verduras fora a essa View, e o nome da fazenda dentro dessa View. Então essa parte do código ficará da seguinte forma:

export default function Cesta() {
  return <>
          <Image source={topo} style={estilos.topo} />
          <Text style={estilos.titulo}>Detalhe da Cesta</Text>

          <View style={estilos.cesta}>
              <Text style={estilos.nome}>Cesta de Verduras</Text>

              <View styles={estilos.fazenda}>
                  <Image source={logo} style={estilos.imgemFazenda} />
                <Text style={estilos.nomeFazenda}>Jenny Jack Farm</Text>
              </View>

              <Text style={estilos.descricao}>Uma cesta diretamente da fazenda para sua mesa</Text>
              <Text style={estilos.preco}>R$ 40,00</Text>
          </View>
      </>
}

A outra correção que podemos fazer para conseguir alinhar a logo com o nome da fazenda, é na abertura da View da fazenda. Se você reparar está chamando styles={estilos.fazenda} e dessa forma como não existe styles , a estilização não vai pegar nesse elemento. Então se alterarmos para <View style={estilos.fazenda}> ele vai pegar o estilo corretamente. Logo, esse trecho do código ficará da seguinte forma:

`export default function Cesta() { return <> Detalhe da Cesta

      <View style={estilos.cesta}>
          <Text style={estilos.nome}>Cesta de Verduras</Text>

          <View style={estilos.fazenda}>
              <Image source={logo} style={estilos.imgemFazenda} />
            <Text style={estilos.nomeFazenda}>Jenny Jack Farm</Text>
          </View>

          <Text style={estilos.descricao}>Uma cesta diretamente da fazenda para sua mesa</Text>
          <Text style={estilos.preco}>R$ 40,00</Text>
      </View>
  </>

} `

Dessa forma a logo vai ficar alinhada com o nome da fazenda corretamente.

Eu espero que tenha ajudado e qualquer coisa estou por aqui.

Abraço

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!