crazycharge-app/component/global/normal_button.tsx

import React, { ReactElement } from 'react';
import {
    Pressable,
    Text,
    StyleSheet,
    ViewStyle,
    StyleProp
} from 'react-native';

interface NormalButtonProps {
    title: ReactElement;
    extendedStyle?: StyleProp<ViewStyle>;
    onPress: () => void;
    disabled?: boolean;
    buttonPressedStyle?: StyleProp<ViewStyle>;
}

const NormalButton: React.FC<NormalButtonProps> = ({
    title,
    extendedStyle,
    onPress,
    disabled,
    buttonPressedStyle
}) => {
    return (

        <Pressable
            onPress={onPress}
            disabled={disabled}
            style={({ pressed }) => [
                styles.button,
                extendedStyle,
                pressed ? buttonPressedStyle || styles.buttonPressed : null
            ]}
        >
            {title}
        </Pressable>
    );
};

const styles = StyleSheet.create({
    button: {
        maxWidth: '100%',
        fontSize: 16,
        backgroundColor: '#025c72',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 12,
        padding: 20
    },
    buttonPressed: {
        backgroundColor: '#28495c'
    }
});

export default NormalButton;

//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/
//*************************PLEASE IGNORE BELOW COMMENTS. FOR MY OWN REVIEW ONLY**************************************/

// import React, { ReactElement } from 'react';
// import { Pressable, PressableProps, StyleSheet, TextStyle } from 'react-native';

// interface NormalButtonProps extends PressableProps {
//     title: ReactElement;
//     extendedStyle?: TextStyle;
// }
// //2024-06-06 I modified the button so that it accept a forwarded ref for Navigation
// const NormalButton = React.forwardRef<
//     React.ElementRef<typeof Pressable>,
//     NormalButtonProps
// >(({ title, extendedStyle, onPress, disabled }, ref) => {
//     return (
//         <Pressable
//             ref={ref}
//             onPress={onPress}
//             disabled={disabled}
//             style={({ pressed }) => [
//                 styles.button,
//                 pressed ? styles.buttonPressed : null,
//                 extendedStyle
//             ]}
//         >
//             {title}
//         </Pressable>
//     );
// });
// const styles = StyleSheet.create({
//     button: {
//         maxWidth: '100%',
//         fontSize: 16,
//         backgroundColor: '#025c72',
//         justifyContent: 'center',
//         alignItems: 'center',
//         borderRadius: 12,
//         padding: 20
//     },
//     buttonPressed: {
//         backgroundColor: '#28495c'
//     }
// });

// export default NormalButton;