From 97c0a31ce6ff358170ed8223af5bea4d21a6805a Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 18 Apr 2016 16:46:09 -0700
Subject: [PATCH] [fix] TouchableHighlight default underlayColor

---
 .../Touchable/TouchableHighlight.js           | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/Touchable/TouchableHighlight.js b/src/components/Touchable/TouchableHighlight.js
index 27f1857b..115bd4af 100644
--- a/src/components/Touchable/TouchableHighlight.js
+++ b/src/components/Touchable/TouchableHighlight.js
@@ -105,9 +105,11 @@ var TouchableHighlight = React.createClass({
           backgroundColor: props.underlayColor,
         }
       },
-      underlayStyle: [
-        INACTIVE_UNDERLAY_PROPS.style
-      ]
+      underlayProps: {
+        style: {
+          backgroundColor: props.style.backgroundColor || null
+        }
+      }
     };
   },
 
@@ -203,10 +205,7 @@ var TouchableHighlight = React.createClass({
     this._hideTimeout = null;
     if (this._hasPressHandler() && this.refs[UNDERLAY_REF]) {
       this.refs[CHILD_REF].setNativeProps(INACTIVE_CHILD_PROPS);
-      this.refs[UNDERLAY_REF].setNativeProps({
-        ...INACTIVE_UNDERLAY_PROPS,
-        style: this.state.underlayStyle,
-      });
+      this.refs[UNDERLAY_REF].setNativeProps(this.state.underlayStyle);
       this.props.onHideUnderlay && this.props.onHideUnderlay();
     }
   },
@@ -233,19 +232,19 @@ var TouchableHighlight = React.createClass({
         accessible={true}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityRole={this.props.accessibilityRole || this.props.accessibilityTraits || 'button'}
-        ref={UNDERLAY_REF}
-        style={[styles.root, this.props.style]}
-        onLayout={this.props.onLayout}
         hitSlop={this.props.hitSlop}
         onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
         onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
         onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
+        onLayout={this.props.onLayout}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
         onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
         onResponderGrant={this.touchableHandleResponderGrant}
         onResponderMove={this.touchableHandleResponderMove}
         onResponderRelease={this.touchableHandleResponderRelease}
         onResponderTerminate={this.touchableHandleResponderTerminate}
+        ref={UNDERLAY_REF}
+        style={[styles.root, this.props.style]}
         tabIndex='0'
         testID={this.props.testID}>
         {React.cloneElement(
@@ -264,9 +263,6 @@ var UNDERLAY_REF = keyOf({underlayRef: null});
 var INACTIVE_CHILD_PROPS = {
   style: StyleSheet.create({x: {opacity: 1.0}}).x,
 };
-var INACTIVE_UNDERLAY_PROPS = {
-  style: {backgroundColor: null}
-};
 
 var styles = StyleSheet.create({
   root: {