ilink-world/app/components/CustomButton/index.js

import React from "react";
import {ActivityIndicator, StyleSheet, TouchableOpacity} from "react-native";
import {Color} from '../../config/Color';
import PropTypes from "prop-types";
import CustomText from "../CustomText";
import styles from "./styles";

export default function CustomButton(props) {
    const {
        style,
        styleCustomText,
        icon,
        outline,
        onPress,
        full,
        round,
        loading,
        children,
        ...rest
    } = props;

    return (
        <TouchableOpacity
            {...rest}
            style={StyleSheet.flatten([
                [styles.default, {backgroundColor: Color.primaryColor}],
                outline && [
                    styles.outline,
                    {backgroundColor: Color.cardBackgroundColor, borderColor: Color.primaryColor}
                ],
                full && styles.full,
                round && styles.round,
                style
            ])}
            activeOpacity={0.9}
            onPress={onPress}
        >
            {icon ? icon : null}
            <CustomText
                style={StyleSheet.flatten([
                    styles.textDefault,
                    outline && {color: Color.primaryColor},
                    styleCustomText
                ])}
                numberOfLines={1}
            >
                {children || "CustomButton"}
            </CustomText>
            {loading ? (
                <ActivityIndicator
                    size="small"
                    color={outline ? Color.primaryColor : Color.whiteColor}
                    style={{paddingLeft: 5}}
                />
            ) : null}
        </TouchableOpacity>
    );
}

CustomButton.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    icon: PropTypes.node,
    outline: PropTypes.bool,
    full: PropTypes.bool,
    onPress: PropTypes.func,
    round: PropTypes.bool,
    loading: PropTypes.bool
};

CustomButton.defaultProps = {
    style: {},
    icon: null,
    outline: false,
    full: false,
    onPress: () => {
    },
    round: false,
    loading: false
};