Dando erro no app

Fala, Fernanda! Tudo certo ?

Pelo que parece, ficou faltando colocar dois pontos depois do width, o que está estourando um erro de Unexpected token. Poderia adicionar e verificar se vai funcionar normalmente ? Ficando da seguinte forma:

width: "100%",

Se não funcionar, consegue mandar o seu código aqui ? Assim consigo te ajudar de forma mais rápida.

Bons estudos!

Oii, coloquei os dois pontos, mas continua dando erro no aplicativo, segue o código:

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

import topo from '../../assets/topo.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>
    </>
}

const estilos = StyleSheet.create({
    topo: {
        widht: "100%",
        height: 578 / 768 * width,
    },
    titulo: {
        width: "100%",
        position: "absolute",
        textAlign: "center",
        fontSize: 16,
        lineHeight: 26,
        color: "white",
        fontWeight: "bold",
        padding: 16
    }
})

E o código do App.js que fizemos algumas alterações durante o curso:

import { StatusBar, SafeAreaView, StyleSheet, Text, View } from 'react-native';

import Cesta from './src/telas/Cesta';


export default function App() {
  return (
    <SafeAreaView>
      <StatusBar />
     <Cesta />
    </SafeAreaView>
  );
}

C:\Users\User 1\orgs-cesta\assets\assets\topo.png

Está dando um erro falando que os arquivos não existem, mas eles estão importados no visual studio code aparentemente certinho, o que pode ser? Obrigada!!

Um dos possíveis motivos que fazem aparecer esse erro é alguma importação que não esteja correta no código, então o interessante é verificar todas as importações e os diretórios, principalmente do arquivo que o vscode está reclamando que não existe, verificar se a importação dele está toda correta. Por exemplo, nesse projeto que eu também tenho aqui no meu computador a importação da imagem precisa voltar duas pastas a mais, ficando da seguinte forma:

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

Dá uma verificada se no seu está precisando voltar mais algumas pastas também. Caso isso não resolva, consegue me mandar um print do erro que está aparecendo e um outro print de como o projeto está organizado ? Fico no aguardo

O meu código dessa parte ficou da seguinte forma:

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


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


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


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


const estilos = StyleSheet.create({
  topo: {
    width: "100%",
    height: 578 / 768 * width,
  },
  titulo: {
    width: "100%",
    position: "absolute",
    textAlign: "center",
    fontSize: 16,
    lineHeight: 26,
    color: "white",
    fontWeight: "bold",
    padding: 16,
  },
});

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

Abraço e bons estudos!

André, você tava certo, importei uma pasta antes e agora a imagem apareceu, porém ela tá desconfigurada, e o texto não aparece também, segue o código pra você dar uma analisada e o print de como o app está ficando, muito obrigada por toda a ajuda!!

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

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

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

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

const estilos = StyleSheet.create({
    topo: {
        widht: "100%",
        height: 578 / 768 * width,
    },
    titulo: {
        width: "100%",
        position: "absolute",
        textAlign: "center",
        fontSize: 16,
        lineHeight: 26,
        color: "white",
        fontWeight: "bold",
        padding: 16
    }
})

Oii André!! Deu certo aqui, refiz o código do início e foi, muito obrigada!!