Reaproveitando o botão

Detalhes.tsx

import { Image, StyleSheet, View } from "react-native";

import Texto from "../../../componentes/Texto";
import { TextoCesta } from "../../../mocks/interfaces";
import Botao from "./Botao";

export default function Detalhes(textoCesta: TextoCesta) {

    return <>
        <Texto style={estilos.nome}>{textoCesta.detalhes.nome}</Texto>
        <View style={estilos.fazenda}>
            <Image source={textoCesta.detalhes.logoFazenda} style={estilos.imagemFazenda}></Image>
            <Texto style={estilos.nomeFazenda}>{textoCesta.detalhes.nomeFazenda}</Texto>

        </View>
        <Texto style={estilos.descricao}>
            {textoCesta.detalhes.descricao}
        </Texto>
        <Texto style={estilos.preco}>{textoCesta.detalhes.preco}</Texto>
        <Botao style={estilos.botao} onPress={() => { console.log("OLA!") }}> {textoCesta.detalhes.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
    }
})

Botao.tsx

import React from "react";
import { GestureResponderEvent, StyleProp, StyleSheet, TouchableOpacity, ViewStyle } from "react-native";
import Texto from "../../../componentes/Texto";

type Props = {
    children: React.ReactNode;
    style?: StyleProp<ViewStyle>;
    onPress?: (event: GestureResponderEvent) => void;
}

export default function Botao({ children, style, onPress }: Props) {
    return <>
        <TouchableOpacity style={[style, estilos.botao]} onPress={onPress}>
            <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"
    }
})