button-styles.ts

import {
    StyleSheet,
    ViewStyle,
    TextStyle,
    Dimensions
} from 'react-native';

export default StyleSheet.create({
    primary: {
        backgroundColor: "rgb(250, 122, 87)",
        borderRadius: 2
    } as ViewStyle,

    primaryText: {
        color: "#ffffff"
    } as TextStyle,

    ghost: {
        backgroundColor: "transparent",
        borderWidth: 1,
        borderColor: "#bbb",
    } as ViewStyle,

    ghostText: {
        color: "#666666"
    } as TextStyle,

    danger: {
        backgroundColor: "rgb(231, 76, 60)",
        borderRadius: 2
    } as ViewStyle,

    dangerText: {
        color: "#ffffff"
    } as TextStyle,

    normal: {
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 8,
        paddingRight: 8,
        borderRadius: 2
    } as ViewStyle,

    normalText: {
        fontSize: 13
    } as TextStyle,
     
    large: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 15,
        paddingRight: 15
    } as ViewStyle,

    largeText: {
        fontSize: 16
    } as TextStyle,

    small: {
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 4,
        paddingRight: 4
    } as ViewStyle,

    smallText: {
        fontSize: 10
    } as TextStyle,

    disabled: {
        backgroundColor: "#e4e4e4"
    } as ViewStyle,
    
    disabledText: {
        color: "#999"
    } as TextStyle
});

export let undelayColorMap: any = {
    primary: "rgb(236, 111, 87)",
    ghost: "rgba(0, 0, 0, .05)",
    danger: "rgb(220, 67, 60)"
};

button.tsx

import { Component } from 'react';
import { 
    View,
    ViewStyle,
    TextStyle,
    Text,
    TouchableHighlight,
    TouchableHighlightProperties
} from 'react-native';
import ButtonStyles, { undelayColorMap } from './button-styles';

export interface ButtonProps extends TouchableHighlightProperties {
    type?: "primary" | "ghost" | "danger",
    size?: "small"  | "normal" | "large",
    text?: string;
}

export default class Button extends Component<ButtonProps, any> {
    private _styles: ViewStyle[];
    private _textStyles: TextStyle[];
    private _underlayColor: string;

    constructor(props: ButtonProps, context: any) {
        super(props, context);
        this._underlayColor="rgba(0, 0, 0, .1)";
        this._getButtonBaseStyle(this.props);
    }

    render() {
        let children: React.ReactNode;
        if (this.props.text && !this.props.children) {
            children = (
                <Text style={this._textStyles}>{this.props.text}</Text>
            );
        } else {
            children = this.props.children;
        }

        return (
            <TouchableHighlight
                {...this.props as any}
                underlayColor={this.props.underlayColor || this._underlayColor}
                style={[...this._styles, this.props.style]}>
                {children}
            </TouchableHighlight>
        );
    }

    shouldComponentUpdate(nextPorps: ButtonProps) {
        if (nextPorps.type != this.props.type || 
            nextPorps.size != this.props.size || 
            nextPorps.disabled != this.props.disabled
        ) {
            this._getButtonBaseStyle(nextPorps);
        }
    }

    private _getButtonBaseStyle(props: ButtonProps) {

        let styleMap: any = ButtonStyles;
        let type = props.type;
        let size = props.size;

        this._styles = [];
        this._textStyles = [];

        if (type) {
             this._styles.push(styleMap[type]);
             this._underlayColor = undelayColorMap[type];
             this._textStyles.push(styleMap[`${type}Text`]);
        }

        if (size) {
            this._styles.push(styleMap[size]);
            this._textStyles.push(styleMap[`${size}Text`]);
        } 
        
        if (props.disabled) {
            this._styles.push(ButtonStyles.disabled);
            this._textStyles.push(ButtonStyles.disabledText);
        }
    }
}