@naturalclar/apsl-react-native-button/dist/Button.js

React Native button component with rounded corners.

import React, { PureComponent } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator, TouchableNativeFeedback, Platform, } from 'react-native';
class Button extends PureComponent {
    _renderChildren() {
        let childElements = [];
        React.Children.forEach(this.props.children, (item) => {
            if (typeof item === 'string' || typeof item === 'number') {
                const element = (React.createElement(Text, { style: [styles.textButton, this.props.textStyle], allowFontScaling: this.props.allowFontScaling, key: item }, item));
                childElements.push(element);
            }
            else if (React.isValidElement(item)) {
                childElements.push(item);
            }
        });
        return childElements;
    }
    _renderInnerText() {
        if (this.props.isLoading) {
            return (React.createElement(ActivityIndicator, { animating: true, size: "small", style: styles.spinner, color: this.props.activityIndicatorColor || 'black' }));
        }
        return this._renderChildren();
    }
    render() {
        if (this.props.isDisabled === true || this.props.isLoading === true) {
            return (React.createElement(View, { style: [
                    styles.button,
                    this.props.style,
                    this.props.disabledStyle || styles.opacity,
                ] }, this._renderInnerText()));
        }
        // Extract Touchable props
        let touchableProps = {
            testID: this.props.testID,
            accessibilityLabel: this.props.accessibilityLabel,
            onPress: this.props.onPress,
            onPressIn: this.props.onPressIn,
            onPressOut: this.props.onPressOut,
            onLongPress: this.props.onLongPress,
            activeOpacity: this.props.activeOpacity,
            delayLongPress: this.props.delayLongPress,
            delayPressIn: this.props.delayPressIn,
            delayPressOut: this.props.delayPressOut,
        };
        if (Button.isAndroid) {
            touchableProps = Object.assign(touchableProps, {
                background: this.props.background ||
                    TouchableNativeFeedback.SelectableBackground(),
            });
            return (React.createElement(TouchableNativeFeedback, Object.assign({}, touchableProps),
                React.createElement(View, { style: [styles.button, this.props.style] }, this._renderInnerText())));
        }
        else {
            return (React.createElement(TouchableOpacity, Object.assign({}, touchableProps, { style: [styles.button, this.props.style] }), this._renderInnerText()));
        }
    }
}
Button.isAndroid = Platform.OS === 'android';
const styles = StyleSheet.create({
    button: {
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        alignSelf: 'stretch',
        justifyContent: 'center',
    },
    textButton: {
        fontSize: 18,
        textAlign: 'center',
        backgroundColor: 'transparent',
    },
    spinner: {
        alignSelf: 'center',
    },
    opacity: {
        opacity: 0.5,
    },
});
export default Button;