react-native-modern-elements/dist/components/Button.js

A modern, customizable UI component library for React Native

import React from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";
import { colors } from "../constants/theme";
import Loading from "./Loading";
const Button = ({ style, onPress, loading = false, children, disabled, className, }) => {
    const isPressedRef = React.useRef(false);
    const handlePress = () => {
        if (disabled || loading || isPressedRef.current)
            return;
        isPressedRef.current = true;
        onPress === null || onPress === void 0 ? void 0 : onPress();
        // Reset after delay, adjust time if needed
        setTimeout(() => {
            isPressedRef.current = false;
        }, 1000);
    };
    if (loading) {
        return (React.createElement(View, { style: [styles.button, { backgroundColor: "transparent" }] },
            React.createElement(Loading, null)));
    }
    return (React.createElement(TouchableOpacity
    // onPress={!disabled && !loading ? onPress : undefined}
    , Object.assign({ 
        // onPress={!disabled && !loading ? onPress : undefined}
        onPress: handlePress, disabled: disabled || loading }, { className }, { style: [styles.button, style ? style : null] }), children));
};
const styles = StyleSheet.create({
    button: {
        backgroundColor: colors.primary, // Default color
        paddingHorizontal: 20,
        paddingVertical: 13,
        borderRadius: 20,
        justifyContent: "center",
        alignItems: "center",
    },
});
export default React.memo(Button);