From d040d3b8c9044a0260eb303513a6cf8fd0baec0f Mon Sep 17 00:00:00 2001 From: Adrian Avila Date: Tue, 14 Aug 2018 18:59:45 -0500 Subject: [PATCH 1/2] Centering and shadows on android fixed with prop fixNativeFeedbackRadius When setting fixNativeFeedbackRadius to true and giving the ActionButton position 'Center'. The AtionButton and ActionButtonItems would have an offset from the center due to incorrect styling. fixNativeFeedbackRadius also caused an ugly shadow on ActionButtonItems and their respective lable, and also a cropped dropshadow. For the ActionButtonItem, this was due to the shadow styling was set on the wrong element for android. As for the lable, we do not need to set the fixNativeFeedbackRadius to the touchableBackground (the lable is rectangular anyway). You'll notice that the ripple effect on the lable would extend in a circular fashion outside the borders of the lable. --- ActionButton.js | 2 +- ActionButtonItem.js | 32 +++++++++++++++----------------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/ActionButton.js b/ActionButton.js index 4aa6a10..aba5bd6 100644 --- a/ActionButton.js +++ b/ActionButton.js @@ -185,7 +185,7 @@ export default class ActionButton extends Component { const parentStyle = isAndroid && this.props.fixNativeFeedbackRadius ? { - right: this.props.offsetX, + marginHorizontal: this.props.offsetX, zIndex: this.props.zIndex, borderRadius: this.props.size / 2, width: this.props.size diff --git a/ActionButtonItem.js b/ActionButtonItem.js index a4b2799..51e1763 100644 --- a/ActionButtonItem.js +++ b/ActionButtonItem.js @@ -85,28 +85,27 @@ export default class ActionButtonItem extends Component { }; if (position !== "center") - buttonStyle[position] = (this.props.parentSize - size) / 2; + animatedViewStyle[position] = (this.props.parentSize - size) / 2; const Touchable = getTouchableComponent(this.props.useNativeFeedback); - const parentStyle = isAndroid && - this.props.fixNativeFeedbackRadius - ? { - height: size, - marginBottom: spacing, - right: this.props.offsetX, - borderRadius: this.props.size / 2 + const parentStyle = { + marginHorizontal: this.props.offsetX, + marginBottom: spacing + SHADOW_SPACE, + borderRadius: this.props.size / 2, } - : { - paddingHorizontal: this.props.offsetX, - height: size + SHADOW_SPACE + spacing - }; + return ( - + {this.props.children} @@ -177,8 +176,7 @@ export default class ActionButtonItem extends Component { return ( Date: Tue, 13 Nov 2018 16:52:39 -0500 Subject: [PATCH 2/2] remove dead code and organize --- ActionButton.js | 63 +++++++++++++++++++++------------------- ActionButtonItem.js | 70 +++++++++++++++++++++------------------------ 2 files changed, 66 insertions(+), 67 deletions(-) diff --git a/ActionButton.js b/ActionButton.js index aba5bd6..23ef643 100644 --- a/ActionButton.js +++ b/ActionButton.js @@ -75,7 +75,6 @@ export default class ActionButton extends Component { getOffsetXY() { return { - // paddingHorizontal: this.props.offsetX, paddingVertical: this.props.offsetY }; } @@ -86,9 +85,8 @@ export default class ActionButton extends Component { { elevation: this.props.elevation, zIndex: this.props.zIndex, - justifyContent: this.props.verticalOrientation === "up" - ? "flex-end" - : "flex-start" + justifyContent: + this.props.verticalOrientation === "up" ? "flex-end" : "flex-start" } ]; } @@ -182,22 +180,23 @@ export default class ActionButton extends Component { }; const Touchable = getTouchableComponent(this.props.useNativeFeedback); - const parentStyle = isAndroid && - this.props.fixNativeFeedbackRadius - ? { - marginHorizontal: this.props.offsetX, - zIndex: this.props.zIndex, - borderRadius: this.props.size / 2, - width: this.props.size - } - : { marginHorizontal: this.props.offsetX, zIndex: this.props.zIndex }; + const parentStyle = + isAndroid && this.props.fixNativeFeedbackRadius + ? { + marginHorizontal: this.props.offsetX, + zIndex: this.props.zIndex, + borderRadius: this.props.size / 2, + width: this.props.size + } + : { marginHorizontal: this.props.offsetX, zIndex: this.props.zIndex }; return ( - - + {this._renderButtonIcon()} @@ -227,10 +224,18 @@ export default class ActionButton extends Component { } _renderButtonIcon() { - const { icon, renderIcon, btnOutRangeTxt, buttonTextStyle, buttonText } = this.props; + const { + icon, + renderIcon, + btnOutRangeTxt, + buttonTextStyle, + buttonText + } = this.props; if (renderIcon) return renderIcon(this.state.active); if (icon) { - console.warn('react-native-action-button: The `icon` prop is deprecated! Use `renderIcon` instead.'); + console.warn( + "react-native-action-button: The `icon` prop is deprecated! Use `renderIcon` instead." + ); return icon; } @@ -261,16 +266,16 @@ export default class ActionButton extends Component { let actionButtons = !Array.isArray(children) ? [children] : children; - actionButtons = actionButtons.filter( actionButton => (typeof actionButton == 'object') ) + actionButtons = actionButtons.filter( + actionButton => typeof actionButton == "object" + ); const actionStyle = { flex: 1, alignSelf: "stretch", - // backgroundColor: 'purple', justifyContent: verticalOrientation === "up" ? "flex-end" : "flex-start", - paddingTop: this.props.verticalOrientation === "down" - ? this.props.spacing - : 0, + paddingTop: + this.props.verticalOrientation === "down" ? this.props.spacing : 0, zIndex: this.props.zIndex }; @@ -333,7 +338,7 @@ export default class ActionButton extends Component { setTimeout(() => { if (this.mounted) { - this.setState({ active: false, resetToken: this.state.resetToken }); + this.setState({ active: false, resetToken: this.state.resetToken }); } }, 250); } diff --git a/ActionButtonItem.js b/ActionButtonItem.js index 51e1763..1e3e42f 100644 --- a/ActionButtonItem.js +++ b/ActionButtonItem.js @@ -62,8 +62,6 @@ export default class ActionButtonItem extends Component { const animatedViewStyle = { marginBottom: -SHADOW_SPACE, alignItems: alignItemsMap[position], - - // backgroundColor: this.props.buttonColor, opacity: this.props.anim, transform: [ { @@ -90,22 +88,21 @@ export default class ActionButtonItem extends Component { const Touchable = getTouchableComponent(this.props.useNativeFeedback); const parentStyle = { - marginHorizontal: this.props.offsetX, - marginBottom: spacing + SHADOW_SPACE, - borderRadius: this.props.size / 2, - } + marginHorizontal: this.props.offsetX, + marginBottom: spacing + SHADOW_SPACE, + borderRadius: this.props.size / 2 + }; return ( - - + + > - + {this.props.children} @@ -142,9 +143,8 @@ export default class ActionButtonItem extends Component { } = this.props; const offsetTop = Math.max(size / 2 - TEXT_HEIGHT / 2, 0); const positionStyles = { top: offsetTop }; - const hideShadow = hideLabelShadow === undefined - ? this.props.hideShadow - : hideLabelShadow; + const hideShadow = + hideLabelShadow === undefined ? this.props.hideShadow : hideLabelShadow; if (position !== "center") { positionStyles[position] = @@ -160,30 +160,24 @@ export default class ActionButtonItem extends Component { textContainerStyle ]; - const title = ( - React.isValidElement(this.props.title) ? - this.props.title - : ( - - {this.props.title} - - ) - ) + const title = React.isValidElement(this.props.title) ? ( + this.props.title + ) : ( + + {this.props.title} + + ); return ( - - {title} - + {title} ); }