Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Descrição desaparece

O VS não apresenta nenhum erro no código mas no aplicativo a descrição some, preciso de ajuda pois não consigo identificar o erro.

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

import Texto from '../componentes/texto';

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}>
        <Text style={estilos.nome} >Cesta de verduras</Text> 
        <View style={estilos.produtor}> 
            <Image source={logo} style={estilos.imgProdutor} />
            <Text style={estilos.nomeProdutor}> Chacara Sossego </Text>
        </View>
        <Texto style={estilos.descricao}> Uma cesta de produtos selecionados cuidadosamente
         da fazenda direto para sua cozinha </Texto>
         <Text style={estilos.preco}> R$ 40,00 </Text>
     </View>
    </>
}

const estilos = StyleSheet.create({
    topo: {
        width: "100%",
        height: 578 / 768 * width,
        fontFamily: "MontserratRegular",
    },
    titulo: {
        width: '100%',
        position: 'absolute',
        textAlign: 'center',
        fontSize: 16,
        lineHeight: 26,
        color: "#ffffff",
        fontWeight:'bold',
        padding: 16
    },
    cesta: {
        paddingVertical: 8,
        paddingHorizontal: 16,
    },
    nome: {
        fontSize:26,
        lineHeight: 42,
        color: "#464646",
        fontWeight:"bold",
    },
    produtor:{
        flexDirection: 'row',
        paddingVertical: 12,
    },
    imgProdutor: {
        width:32,
        height: 32,
    },
    nomeProdutor:{
        fontSize: 16,
        lineHeight: 26,
        marginLeft: 12,
    },
    descricao: {
        color:"#A3A3A3",
        fontSize: 16,
        lineHeight: 26,
    },
    preco: {
        color: "#2A9F85",
        fontWeight: "bold",
        fontSize: 26,
        lineHeight: 42,
        marginTop: 8,
    },
});
import React from 'react';
import { StyleSheet, Text } from 'react-native';

export default function Texto( {children, style} ) {
    return
    <Text style={[style, estilos.texto]}> {children} </Text>
}

const estilos = StyleSheet.create({
    Texto: {
        fontFamily: "MontserratRegular",
    },
})

Como apresenta no aplicativo:Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Descobri o erro. No texto.js eu precisei adicionar parênteses após o return e reapareceu (no código da professora não precisou e funcionou, já no meu precisou, não sei explicar o por quê).

Assim ficou o código:

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

export default function Texto( {children, style} ) {
    return (
    <Text style={[style, estilos.texto]}> {children} </Text>
    )
}

const estilos = StyleSheet.create({
    Texto: {
        fontFamily: "MontserratRegular",
    },
})