Botao.js
import React from "react";
import { TouchableOpacity, StyleSheet } from "react-native";
import Texto from "./Texto";
export default function Botao({ children, style, onPress }) {
return (
<TouchableOpacity onPress={onPress} style={[estilos.botao, style]}>
<Texto style={estilos.textoBotao}>{children}</Texto>
</TouchableOpacity>
);
}
const estilos = StyleSheet.create({
botao: {
backgroundColor: "#2A9F85",
paddingVertical: 16,
borderRadius: 6,
},
textoBotao: {
textAlign: "center",
color: "#ffffff",
fontSize: 16,
lineHeight: 26,
fontWeight: "bold",
},
});
Detalhes.js
import React from "react";
import { Image, View, StyleSheet } from "react-native";
import Texto from "../../../componentes/Texto";
import Botao from "../../../componentes/Botao";
export default function Detalhes({
descricao,
nomeFazenda,
nome,
logoFazenda,
preco,
botao,
}) {
function handleButtonOnPress() {
console.log("clicked");
}
return (
<>
<Texto style={estilos.nome}>{nome}</Texto>
<View style={estilos.fazenda}>
<Image style={estilos.imagemFazenda} source={logoFazenda} />
<Texto style={estilos.nomeFazenda}>{nomeFazenda}</Texto>
</View>
<Texto style={estilos.descricao}>{descricao}</Texto>
<Texto style={estilos.preco}>{preco}</Texto>
<Botao onPress={handleButtonOnPress} style={estilos.botao}>
{botao}
</Botao>
</>
);
}
const estilos = StyleSheet.create({
nome: {
color: "#464646",
fontSize: 26,
lineHeight: 42,
fontWeight: "bold",
},
fazenda: {
flexDirection: "row",
paddingVertical: 12,
},
imagemFazenda: {
width: 32,
height: 32,
},
nomeFazenda: {
fontSize: 16,
lineHeight: 26,
marginLeft: 12,
},
descricao: {
color: "#A3A3A3",
fontSize: 16,
lineHeight: 26,
},
preco: {
color: "#2A9F85",
fontWeight: "bold",
fontSize: 26,
lineHeight: 42,
marginTop: 8,
},
botao: {
marginTop: 16,
},
});