From 7ee051db289ceebb404ada74e5be7713c87d5156 Mon Sep 17 00:00:00 2001
From: Dapeng Gao <dpgao@users.noreply.github.com>
Date: Tue, 27 Jun 2017 11:23:53 -0700
Subject: [PATCH] Clearer code in Button.js

Summary:
Thanks for submitting a PR! Please read these instructions carefully:

- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

What existing problem does the pull request solve?
* Combined repeating `if` checks for clearer logic.
* `defaultBlue` is inlined because it is only used once for each OS.

- Updated the `Button.js` file in an existing project and all buttons behave exactly the same. Here is a simple demo:
  ![](http://i.makeagif.com/media/6-11-2017/B0Bhry.gif)

- There is no change in the underlying logic of the code.
Closes https://github.com/facebook/react-native/pull/14455

Differential Revision: D5330112

Pulled By: hramos

fbshipit-source-id: 7fd1a0609f0bb2123208d0e1b3da2bc779f9583d
---
 Libraries/Components/Button.js | 33 ++++++++++++++-------------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 1a4e940a0..6e50e3920 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -97,25 +97,25 @@ class Button extends React.Component {
     } = this.props;
     const buttonStyles = [styles.button];
     const textStyles = [styles.text];
-    const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
-    if (color && Platform.OS === 'ios') {
-      textStyles.push({color: color});
-    } else if (color) {
-      buttonStyles.push({backgroundColor: color});
+    if (color) {
+      if (Platform.OS === 'ios') {
+        textStyles.push({color: color});
+      } else {
+        buttonStyles.push({backgroundColor: color});
+      }
     }
+    const accessibilityTraits = ['button'];
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
+      accessibilityTraits.push('disabled');
     }
     invariant(
       typeof title === 'string',
       'The title prop of a Button must be a string',
     );
     const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title;
-    const accessibilityTraits = ['button'];
-    if (disabled) {
-      accessibilityTraits.push('disabled');
-    }
+    const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
     return (
       <Touchable
         accessibilityComponentType="button"
@@ -132,32 +132,27 @@ class Button extends React.Component {
   }
 }
 
-// Material design blue from https://material.google.com/style/color.html#color-color-palette
-let defaultBlue = '#2196F3';
-if (Platform.OS === 'ios') {
-  // Measured default tintColor from iOS 10
-  defaultBlue = '#007AFF';
-}
-
 const styles = StyleSheet.create({
   button: Platform.select({
     ios: {},
     android: {
       elevation: 4,
-      backgroundColor: defaultBlue,
+      // Material design blue from https://material.google.com/style/color.html#color-color-palette
+      backgroundColor: '#2196F3',
       borderRadius: 2,
     },
   }),
   text: Platform.select({
     ios: {
-      color: defaultBlue,
+      // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
+      color: '#007AFF',
       textAlign: 'center',
       padding: 8,
       fontSize: 18,
     },
     android: {
-      textAlign: 'center',
       color: 'white',
+      textAlign: 'center',
       padding: 8,
       fontWeight: '500',
     },