Create Custom Button Colors

Button.js

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

const Button = (props) => {
    const { button, text } = styles;

    return (
        <TouchableOpacity {...props} style={[button, props.buttonStyle]}>
            <Text style={[text, props.textStyle]}>
                {props.children}
            </Text>
        </TouchableOpacity>
    );
};

const styles = {
    text: {
        alignSelf: 'center',
        color: '#007aff',
        fontSize: 16,
        fontWeight: '600',
        paddingBottom: 10,
        paddingLeft: 70,
        paddingRight: 70,
        paddingTop: 10,
    },
    button: {
        alignSelf: 'stretch',
        backgroundColor: "#fff",
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#007aff',
        marginLeft: 5,
        marginRight: 5
    },
    brown: {
        color: 'maroon',
    },
    brownButton: {
        width: 100,
        height: 60,
        backgroundColor: 'seashell',
        justifyContent: 'center',
        alignItems: 'center',
        marginVertical: 15,
    },
}

Button.Brown = (props) => (
    <Button
        {...props}
        header="Click here"
        buttonStyle={styles.brownButton}
        textColor={styles.brown}
    />
);

export { Button };