/src/telas/Cesta/index.js
import React from 'react';
import { FlatList, StyleSheet, View } from 'react-native';
import Texto from '../../componentes/Texto';
import Topo from '../../componentes/Topo';
import useTextos from '../../hooks/useTextos';
import Detalhes from './componentes/Detalhes';
import Item from './componentes/Item';
export default function Cesta({ detalhes, itens, produtor }) {
const { topoCesta, tituloItens } = useTextos();
return <>
<FlatList
data={itens}
renderItem={Item}
keyExtractor={({ nome }) => nome }
ListHeaderComponent={() => {
return <>
<Topo titulo={topoCesta} />
<View style={estilos.cesta}>
<Detalhes {...detalhes} produtor={produtor} />
<Texto style={estilos.titulo}>{ tituloItens }</Texto>
</View>
</>
}}
style={estilos.lista}
/>
</>
}
const estilos = StyleSheet.create({
lista: {
backgroundColor: '#ffffff',
},
titulo: {
color: "#464646",
fontWeight: "bold",
marginTop: 32,
marginBottom: 8,
fontSize: 20,
lineHeight: 32,
},
cesta: {
paddingVertical: 8,
paddingHorizontal: 16,
},
});
/src/componentes/Topo.js
import React from 'react';
import { Image, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';
import Texto from './Texto';
import Gradiente from '../assets/gradiente.svg';
import topo from '../assets/topo.png';
import VoltarSVG from '../assets/voltar.svg';
const largura = Dimensions.get('screen').width;
const ALTURA_PADRAO = 270;
export default function Topo({ titulo, imagem = topo, altura = ALTURA_PADRAO }) {
const estilos = funcaoEstilos(altura);
return <>
<Image source={imagem} style={estilos.topo} />
<Gradiente width={largura} height={130 / 360 * largura} style={estilos.gradiente}/>
<Texto style={estilos.titulo}>{ titulo }</Texto>
<TouchableOpacity
onPress={() => {}}
style={estilos.botaoVoltar}>
<VoltarSVG color='white' style={estilos.voltar} />
</TouchableOpacity>
</>
}
const funcaoEstilos = (altura) => StyleSheet.create({
topo: {
width: "100%",
height: altura,
},
gradiente: {
position: 'absolute',
},
titulo: {
width: "100%",
position: "absolute",
textAlign: "center",
fontSize: 16,
lineHeight: 26,
color: "white",
fontWeight: "bold",
padding: 16,
},
botaoVoltar: {
position: 'absolute',
padding: 17,
},
voltar: {
width: 24,
height: 24,
},
});
Erro:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.
Check the render method of Topo
.