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: