Add prop useNativeFeedback

- introduce props useNativeFeedback default to true
- document props activeOpacity and make a constant for the default value
- convert tabs into spaces in shared.js to be consistent with the other files

Author: fabriziomoscon

ActionButton.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
-import { StyleSheet, Text, View, Animated, TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';
+import { StyleSheet, Text, View, Animated, TouchableOpacity, Platform } from 'react-native';
 import ActionButtonItem from './ActionButtonItem';
-import { shadowStyle, alignItemsMap, Touchable, isAndroid, touchableBackground } from './shared';
+import { shadowStyle, alignItemsMap, getTouchableComponent, isAndroid, touchableBackground, DEFAULT_ACTIVE_OPACITY } from './shared';
 
 export default class ActionButton extends Component {
   constructor(props) {
@@ -94,21 +94,23 @@ export default class ActionButton extends Component {
       width: this.props.size,
       height: this.props.size,
       borderRadius: this.props.size / 2,
-    }
+    };
 
     const buttonStyle = {
       width: this.props.size,
       height: this.props.size,
       borderRadius: this.props.size / 2,
       alignItems: 'center',
       justifyContent: 'center',
-    }
+    };
+
+    const Touchable = getTouchableComponent(this.props.useNativeFeedback);
 
     return (
       <View style={{ paddingHorizontal: this.props.offsetX }}>
         <Touchable
           background={touchableBackground}
-          activeOpacity={0.85}
+          activeOpacity={this.props.activeOpacity}
           onLongPress={this.props.onLongPress}
           onPress={() => {
             this.props.onPress()
@@ -243,6 +245,8 @@ ActionButton.propTypes = {
   degrees: PropTypes.number,
   verticalOrientation: PropTypes.oneOf(['up', 'down']),
   backgroundTappable: PropTypes.bool,
+  useNativeFeedback: PropTypes.bool,
+  activeOpacity: PropTypes.number,
 };
 
 ActionButton.defaultProps = {
@@ -262,6 +266,8 @@ ActionButton.defaultProps = {
   size: 56,
   verticalOrientation: 'up',
   backgroundTappable: false,
+  useNativeFeedback: true,
+  activeOpacity: DEFAULT_ACTIVE_OPACITY,
 };
 
 const styles = StyleSheet.create({

ActionButtonItem.js

@@ -1,23 +1,29 @@
 import React, { Component, PropTypes } from 'react';
 import { StyleSheet, Text, View, Animated, 
   TouchableNativeFeedback, TouchableWithoutFeedback, Dimensions, Platform } from 'react-native';
-import { shadowStyle, alignItemsMap, Touchable, isAndroid, touchableBackground } from './shared';
+import { shadowStyle, alignItemsMap, getTouchableComponent, isAndroid, touchableBackground, DEFAULT_ACTIVE_OPACITY } from './shared';
 
 const { width: WIDTH } = Dimensions.get('window');
 const SHADOW_SPACE = 10;
+const TEXT_HEIGHT = 22;
+
 const TextTouchable = isAndroid ? TouchableNativeFeedback : TouchableWithoutFeedback;
 
 export default class ActionButtonItem extends Component {
   static get defaultProps() {
     return {
       active: true,
-      spaceBetween: 15
+      spaceBetween: 15,
+      useNativeFeedback: true,
+      activeOpacity: DEFAULT_ACTIVE_OPACITY,
     };
   }
 
   static get propTypes() {
     return {
       active: PropTypes.bool,
+      useNativeFeedback: PropTypes.bool,
+      activeOpacity: PropTypes.number,
     }
   }
 
@@ -51,15 +57,17 @@ export default class ActionButtonItem extends Component {
       height: size,
       borderRadius: size / 2,
       backgroundColor: this.props.buttonColor || this.props.btnColor,
-    }
+    };
 
     if (position !== 'center') buttonStyle[position] = (this.props.parentSize-size)/2;
 
+    const Touchable = getTouchableComponent(this.props.useNativeFeedback);
+
     return (
       <Animated.View pointerEvents="box-none" style={animatedViewStyle}>
         <Touchable
           background={touchableBackground}
-          activeOpacity={this.props.activeOpacity || 0.85}
+          activeOpacity={this.props.activeOpacity || DEFAULT_ACTIVE_OPACITY}
           onPress={this.props.onPress}>
           <View
             style={[buttonStyle, !hideShadow && shadowStyle, this.props.style]}
@@ -90,7 +98,7 @@ export default class ActionButtonItem extends Component {
     return (
       <TextTouchable
         background={touchableBackground}
-        activeOpacity={this.props.activeOpacity || 0.85}
+        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>
@@ -100,7 +108,6 @@ export default class ActionButtonItem extends Component {
   }
 }
 
-const TEXT_HEIGHT = 22;
 
 const styles = StyleSheet.create({
   textContainer: {

README.md

@@ -110,6 +110,8 @@ 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
 
 ##### ActionButton.Item:
 | Property      | Type          | Default             | Description |
@@ -122,3 +124,5 @@ 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

shared.js

@@ -1,24 +1,34 @@
 import { Platform, TouchableOpacity, TouchableNativeFeedback } from 'react-native';
 
+export const DEFAULT_ACTIVE_OPACITY = 0.85;
+
 export const shadowStyle = {
-	shadowOpacity: 0.35,
-	shadowOffset: {
-		width: 0, height: 5,
-	},
-	shadowColor: '#000',
-	shadowRadius: 3,
-	elevation: 5,
+  shadowOpacity: 0.35,
+  shadowOffset: {
+    width: 0, height: 5,
+  },
+  shadowColor: '#000',
+  shadowRadius: 3,
+  elevation: 5,
 };
 
 export const alignItemsMap = {
-	center: 'center',
-	left: 'flex-start',
-	right: 'flex-end'
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end'
 };
 
-
-export const Touchable = Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback;
-
 export const isAndroid = Platform.OS === 'android';
 
-export const touchableBackground = isAndroid ? Platform['Version'] >= 21 ? TouchableNativeFeedback.Ripple('rgba(255,255,255,0.75)') : TouchableNativeFeedback.SelectableBackground() : undefined;
+export function getTouchableComponent(useNativeFeedback) {
+  if (useNativeFeedback === true && isAndroid === true) {
+    return TouchableNativeFeedback;
+  }
+    return TouchableOpacity;
+}
+
+export const touchableBackground = isAndroid
+  ? Platform['Version'] >= 21
+    ? TouchableNativeFeedback.Ripple('rgba(255,255,255,0.75)', false)
+    : TouchableNativeFeedback.SelectableBackground()
+  : undefined;