Refactor common code.

Author: Kaishley Lingachetti

ActionButton.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { StyleSheet, Text, View, Animated, TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';
 import ActionButtonItem from './ActionButtonItem';
-import { shadowStyle, alignItemsMap, Touchable, isAndroid } from './shared';
+import { shadowStyle, alignItemsMap, Touchable, isAndroid, touchableBackground } from './shared';
 
 export default class ActionButton extends Component {
   constructor(props) {
@@ -104,15 +104,6 @@ export default class ActionButton extends Component {
       justifyContent: 'center',
     }
 
-    var touchableBackground;
-    if (isAndroid) {
-      if (Platform['Version'] >= 21) {
-        touchableBackground = TouchableNativeFeedback.Ripple('rgba(255,255,255,0.75)');
-      } else {
-        touchableBackground = TouchableNativeFeedback.SelectableBackground();
-      }
-    }
-
     return (
       <View style={{ paddingHorizontal: this.props.offsetX }}>
         <Touchable

ActionButtonItem.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { StyleSheet, Text, View, Animated, 
   TouchableNativeFeedback, TouchableWithoutFeedback, Dimensions, Platform } from 'react-native';
-import { shadowStyle, alignItemsMap, Touchable, isAndroid } from './shared';
+import { shadowStyle, alignItemsMap, Touchable, isAndroid, touchableBackground } from './shared';
 
 const { width: WIDTH } = Dimensions.get('window');
 const SHADOW_SPACE = 10;
@@ -55,15 +55,6 @@ export default class ActionButtonItem extends Component {
 
     if (position !== 'center') buttonStyle[position] = (this.props.parentSize-size)/2;
 
-    var touchableBackground;
-    if (isAndroid) {
-      if (Platform['Version'] >= 21) {
-        touchableBackground = TouchableNativeFeedback.Ripple('rgba(255,255,255,0.75)');
-      } else {
-        touchableBackground = TouchableNativeFeedback.SelectableBackground();
-      }
-    }
-
     return (
       <Animated.View pointerEvents="box-none" style={animatedViewStyle}>
         <Touchable
@@ -96,15 +87,6 @@ export default class ActionButtonItem extends Component {
 
     const textStyles = [styles.textContainer, positionStyles, textContainerStyle, !hideShadow && shadowStyle];
 
-    var touchableBackground;
-    if (isAndroid) {
-      if (Platform['Version'] >= 21) {
-        touchableBackground = TouchableNativeFeedback.Ripple('rgba(255,255,255,0.75)');
-      } else {
-        touchableBackground = TouchableNativeFeedback.SelectableBackground();
-      }
-    }
-
     return (
       <TextTouchable
         background={touchableBackground}

shared.js

@@ -19,4 +19,6 @@ export const alignItemsMap = {
 
 export const Touchable = Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback;
 
-export const isAndroid = Platform.OS === 'android';
+export const isAndroid = Platform.OS === 'android';
+
+export const touchableBackground = isAndroid ? Platform['Version'] >= 21 ? TouchableNativeFeedback.Ripple('rgba(255,255,255,0.75)') : TouchableNativeFeedback.SelectableBackground() : undefined;