react-native-press-me-button/index.js

An button that screams "Press me!"

import * as React from 'react';
import { View, TouchableWithoutFeedback } from 'react-native';
const color = require('color');
const PressMeButton = props => {
    const [isPressed, setIsPressed] = React.useState(false);
    const { width, height, style, buttonColor, backgroundColor = 'transparent', shadowStyle = {
        shadowColor: 'black',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.8,
        shadowRadius: 6,
        elevation: 10,
    }, frontStyle, cornerRadius = 2, edgeHeight = 10, darkenEdgeBy = 0.3, disabled, children, } = props;
    const onPressIn = React.useCallback(() => {
        var _a;
        setIsPressed(true);
        if (!disabled) {
            (_a = props.onPressIn) === null || _a === void 0 ? void 0 : _a.call(props);
        }
    }, [setIsPressed, disabled, props.onPressIn]);
    const onPressOut = React.useCallback(() => {
        var _a;
        setIsPressed(false);
        if (!disabled) {
            (_a = props.onPressOut) === null || _a === void 0 ? void 0 : _a.call(props);
        }
    }, [setIsPressed, disabled, props.onPressOut]);
    const onPress = React.useCallback(() => {
        if (!disabled) {
            props.onPress();
        }
    }, [disabled, props.onPress]);
    const edgeColor = props.edgeColor || color(buttonColor).darken(darkenEdgeBy).toString();
    const containerViewStyle = {
        height: height + edgeHeight,
        backgroundColor: backgroundColor,
        borderRadius: cornerRadius,
    };
    if (width !== undefined) {
        containerViewStyle.width = width;
    }
    const isDepressed = isPressed || disabled;
    return (<TouchableWithoutFeedback onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
      
      <View style={[!isDepressed && shadowStyle, containerViewStyle, style]}>
        
        {!isDepressed && (<View style={{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        height: cornerRadius + edgeHeight,
        backgroundColor: edgeColor,
        borderBottomLeftRadius: cornerRadius,
        borderBottomRightRadius: cornerRadius,
    }}/>)}
        
        <View style={[
        {
            marginTop: isDepressed ? edgeHeight : 0,
            marginBottom: isDepressed ? 0 : edgeHeight,
            backgroundColor: buttonColor,
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: cornerRadius,
        },
        frontStyle,
    ]}>
          {children}
        </View>
      </View>
    </TouchableWithoutFeedback>);
};
export default PressMeButton;