Package of fixes and new features (Read on): (#185)

* - Added access to shadow props via the prop shadowStyle.

* The text container style is now overwriting the shadowStyle if needed.

* Exposed the container view style property.

* No longer allowing font scaling on the btn title text.

* Fixed the TouchableNativeFeedback ripple off bounds bug on Android.

- Added the fixNativeFeedbackRadius bool prop, set it to true otherwise nothing changes
in the old code.
- Added the nativeFeedbackRippleColor prop, to set the color of the ripple on
TouchableNativeFeedback

* Updated Readme.md

- Also renamed props.style to props.shadowStyle
- The shadowStyle prop now only works when hideShadow is inactive

Author: SudoPlz

ActionButton.js

@@ -76,7 +76,7 @@ export default class ActionButton extends Component {
 
   render() {
     return (
-      <View pointerEvents="box-none" style={this.getOverlayStyles()}>
+      <View pointerEvents="box-none" style={[this.getOverlayStyles(), this.props.style]}>
         <Animated.View pointerEvents="none" style={[this.getOverlayStyles(), {
           backgroundColor: this.props.bgColor,
           opacity: this.anim.interpolate({
@@ -133,18 +133,22 @@ export default class ActionButton extends Component {
     };
 
     const Touchable = getTouchableComponent(this.props.useNativeFeedback);
+    const parentStyle = Platform.OS === 'android' && this.props.fixNativeFeedbackRadius?
+      { right: this.props.offsetX, zIndex: this.props.zIndex, borderRadius: this.props.size / 2, width: this.props.size }
+      :
+      { paddingHorizontal: this.props.offsetX, zIndex: this.props.zIndex }
 
     return (
-      <View style={{ paddingHorizontal: this.props.offsetX, zIndex: this.props.zIndex }}>
+      <View style={parentStyle}>
         <Touchable
-          background={touchableBackground}
+          background={touchableBackground(this.props.nativeFeedbackRippleColor, this.props.fixNativeFeedbackRadius)}
           activeOpacity={this.props.activeOpacity}
           onLongPress={this.props.onLongPress}
           onPress={() => {
             this.props.onPress()
             if (this.props.children) this.animateButton()
           }}>
-          <Animated.View style={[wrapperStyle, !this.props.hideShadow && shadowStyle]}>
+          <Animated.View style={[wrapperStyle, !this.props.hideShadow && shadowStyle, !this.props.hideShadow && this.props.shadowStyle]}>
             <Animated.View style={[buttonStyle, animatedViewStyle]}>
               {this._renderButtonIcon()}
             </Animated.View>
@@ -261,6 +265,11 @@ ActionButton.propTypes = {
   zIndex: PropTypes.number,
 
   hideShadow: PropTypes.bool,
+  shadowStyle: React.PropTypes.oneOfType([
+    React.PropTypes.object,
+    React.PropTypes.array,
+    React.PropTypes.number,
+  ]),
 
   bgColor: PropTypes.string,
   bgOpacity: PropTypes.number,
@@ -281,8 +290,11 @@ ActionButton.propTypes = {
   degrees: PropTypes.number,
   verticalOrientation: PropTypes.oneOf(['up', 'down']),
   backgroundTappable: PropTypes.bool,
-  useNativeFeedback: PropTypes.bool,
   activeOpacity: PropTypes.number,
+
+  useNativeFeedback: PropTypes.bool,
+  fixNativeFeedbackRadius: PropTypes.bool,
+  nativeFeedbackRippleColor: PropTypes.string,
 };
 
 ActionButton.defaultProps = {
@@ -307,6 +319,8 @@ ActionButton.defaultProps = {
   backgroundTappable: false,
   useNativeFeedback: true,
   activeOpacity: DEFAULT_ACTIVE_OPACITY,
+  fixNativeFeedbackRadius: false,
+  nativeFeedbackRippleColor: 'rgba(255,255,255,0.75)',
 };
 
 const styles = StyleSheet.create({

ActionButtonItem.js

@@ -16,13 +16,17 @@ export default class ActionButtonItem extends Component {
       spaceBetween: 15,
       useNativeFeedback: true,
       activeOpacity: DEFAULT_ACTIVE_OPACITY,
+      fixNativeFeedbackRadius: true,
+      nativeFeedbackRippleColor: 'rgba(255,255,255,0.75)',
     };
   }
 
   static get propTypes() {
     return {
       active: PropTypes.bool,
       useNativeFeedback: PropTypes.bool,
+      fixNativeFeedbackRadius: PropTypes.bool,
+      nativeFeedbackRippleColor: PropTypes.string,
       activeOpacity: PropTypes.number,
     }
   }
@@ -33,9 +37,7 @@ export default class ActionButtonItem extends Component {
     if (!this.props.active) return null;
 
     const animatedViewStyle = {
-      height: size + SHADOW_SPACE + spacing,
       marginBottom: -SHADOW_SPACE,
-      paddingHorizontal: this.props.offsetX,
       alignItems: alignItemsMap[position],
 
       // backgroundColor: this.props.buttonColor,
@@ -63,18 +65,24 @@ export default class ActionButtonItem extends Component {
 
     const Touchable = getTouchableComponent(this.props.useNativeFeedback);
 
+    const parentStyle = Platform.OS === 'android' && this.props.fixNativeFeedbackRadius ?
+      { height: size, marginBottom: spacing, right: this.props.offsetX, borderRadius: this.props.size / 2 }
+      :
+      { paddingHorizontal: this.props.offsetX, height: size + SHADOW_SPACE + spacing };
     return (
-      <Animated.View pointerEvents="box-none" style={animatedViewStyle}>
-        <Touchable
-          background={touchableBackground}
-          activeOpacity={this.props.activeOpacity || DEFAULT_ACTIVE_OPACITY}
-          onPress={this.props.onPress}>
-          <View
-            style={[buttonStyle, !hideShadow && shadowStyle, this.props.style]}
-          >
-            {this.props.children}
-          </View>
-        </Touchable>
+      <Animated.View pointerEvents="box-none" style={[animatedViewStyle, parentStyle]}>
+        <View style={{ width: this.props.size, height: this.props.size, borderRadius: size / 2 }} >
+          <Touchable
+            background={touchableBackground(this.props.nativeFeedbackRippleColor, this.props.fixNativeFeedbackRadius)}
+            activeOpacity={this.props.activeOpacity || DEFAULT_ACTIVE_OPACITY}
+            onPress={this.props.onPress}>
+            <View
+              style={[buttonStyle, !hideShadow && shadowStyle, !hideShadow && this.props.shadowStyle]}
+            >
+              {this.props.children}
+            </View>
+          </Touchable>
+        </View>
         {this._renderTitle()}
       </Animated.View>
     );
@@ -94,15 +102,15 @@ export default class ActionButtonItem extends Component {
       positionStyles.right = WIDTH/2 + size/2 + spaceBetween;
     }
 
-    const textStyles = [styles.textContainer, positionStyles, textContainerStyle, !hideShadow && shadowStyle];
+    const textStyles = [styles.textContainer, positionStyles, !hideShadow && shadowStyle, textContainerStyle];
 
     return (
       <TextTouchable
-        background={touchableBackground}
+        background={touchableBackground(this.props.nativeFeedbackRippleColor, this.props.fixNativeFeedbackRadius)}
         activeOpacity={this.props.activeOpacity || DEFAULT_ACTIVE_OPACITY}
         onPress={this.props.onPress}>
         <View style={textStyles}>
-          <Text style={[styles.text, this.props.textStyle]}>{this.props.title}</Text>
+          <Text allowFontScaling={false} style={[styles.text, this.props.textStyle]}>{this.props.title}</Text>
         </View>
       </TextTouchable>
     );

README.md

@@ -111,8 +111,12 @@ Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94
 | onReset       | function      | null                | use this to set the callback that will be called after the button reset's it's items
 | verticalOrientation | string  | "up"                | direction action buttons should expand.  One of: `up` or `down`
 | backgroundTappable | boolean  | false               | make background tappable in active state of ActionButton
-| useNativeFeedback | boolean   | true                | whether to use TouchableNativeFeedback on Android
 | activeOpacity | number        | 0.85                | activeOpacity props of TouchableOpacity
+| shadowStyle   | style         | null                | The custom shadow style you want to pass in the action button
+| useNativeFeedback | boolean   | true                | Android: Whether to use a TouchableNativeFeedback
+| fixNativeFeedbackRadius | boolean   | false         | Android: Activate this to fix TouchableNativeFeedback Ripple UI problems
+| nativeFeedbackRippleColor | string   | 'rgba(255,255,255,0.75)'         | Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback
+
 
 ##### ActionButton.Item:
 | Property      | Type          | Default             | Description |
@@ -125,6 +129,9 @@ Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94
 | textContainerStyle  | style   | null                | use this to set the textstyle of the button's item text container
 | textStyle     | style         | null                | use this to set the textstyle of the button's item text
 | spaceBetween  | number        | 15                  | use this to set the space between the Button and the text container
-| useNativeFeedback | boolean   | true                | whether to use TouchableNativeFeedback on Android
 | activeOpacity | number        | 0.85                | activeOpacity props of TouchableOpacity
 | hideLabelShadow | boolean     | same as hideShadow  | use this to hide the button's label default elevation and boxShadow
+| shadowStyle   | style         | null                | The custom shadow style you want to pass in the action button item
+| useNativeFeedback | boolean   | true                | Android: Whether to use a TouchableNativeFeedback
+| fixNativeFeedbackRadius | boolean   | false         | Android: Activate this to fix TouchableNativeFeedback Ripple UI problems
+| nativeFeedbackRippleColor | string   | 'rgba(255,255,255,0.75)'         | Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback

shared.js

@@ -27,8 +27,13 @@ export function getTouchableComponent(useNativeFeedback) {
     return TouchableOpacity;
 }
 
-export const touchableBackground = isAndroid
-  ? Platform['Version'] >= 21
-    ? TouchableNativeFeedback.Ripple('rgba(255,255,255,0.75)', false)
-    : TouchableNativeFeedback.SelectableBackground()
-  : undefined;
+export function touchableBackground(color, fixRadius) {
+  if (isAndroid) {
+    if (Platform['Version'] >= 21) {
+      return TouchableNativeFeedback.Ripple(color || 'rgba(255,255,255,0.75)', fixRadius)
+    } else {
+      TouchableNativeFeedback.SelectableBackground()
+    }
+  }
+  return undefined;
+}