Add support for number as colors

Summary: Closes https://github.com/facebook/react-native/pull/5805

Reviewed By: svcscm

Differential Revision: D2911330

Pulled By: javache

fb-gh-sync-id: b07c00a9271a161e3c88755434f6ffa34f4d519d

Libraries/StyleSheet/ColorPropType.js

@@ -41,16 +41,17 @@ var colorPropType = function(isRequired, props, propName, componentName, locatio
       'Invalid ' + locationName + ' `' + (propFullName || propName) +
       '` supplied to `' + componentName + '`: ' + color + '\n' +
 `Valid color formats are
-  - #f0f (#rgb)
-  - #f0fc (#rgba)
-  - #ff00ff (#rrggbb)
-  - #ff00ff00 (#rrggbbaa)
-  - rgb(255, 255, 255)
-  - rgba(255, 255, 255, 1.0)
-  - hsl(360, 100%, 100%)
-  - hsla(360, 100%, 100%, 1.0)
-  - transparent
-  - red
+  - '#f0f' (#rgb)
+  - '#f0fc' (#rgba)
+  - '#ff00ff' (#rrggbb)
+  - '#ff00ff00' (#rrggbbaa)
+  - 'rgb(255, 255, 255)'
+  - 'rgba(255, 255, 255, 1.0)'
+  - 'hsl(360, 100%, 100%)'
+  - 'hsla(360, 100%, 100%, 1.0)'
+  - 'transparent'
+  - 'red'
+  - 0xff00ff00 (0xrrggbbaa)
 `);
   }
 };

Libraries/StyleSheet/__tests__/normalizeColor-test.js

@@ -23,6 +23,9 @@ describe('normalizeColor', function() {
     expect(normalizeColor('rgb(   1   , 2   , 3   )')).not.toBe(null);
     expect(normalizeColor('rgb(-1, -2, -3)')).not.toBe(null);
     expect(normalizeColor('rgba(0, 0, 0, 1)')).not.toBe(null);
+    expect(normalizeColor(0x01234567 + 0.5)).toBe(null);
+    expect(normalizeColor(-1)).toBe(null);
+    expect(normalizeColor(0xffffffff + 1)).toBe(null);
   });
 
   it('should temporarly accept floating point values for rgb', function() {
@@ -113,4 +116,11 @@ describe('normalizeColor', function() {
     expect(normalizeColor('transparent')).toBe(0x00000000);
     expect(normalizeColor('peachpuff')).toBe(0xffdab9ff);
   });
+
+  it('should handle number colors properly', function() {
+    expect(normalizeColor(0x00000000)).toBe(0x00000000);
+    expect(normalizeColor(0xff0000ff)).toBe(0xff0000ff);
+    expect(normalizeColor(0xffffffff)).toBe(0xffffffff);
+    expect(normalizeColor(0x01234567)).toBe(0x01234567);
+  });
 });

Libraries/StyleSheet/normalizeColor.js

@@ -12,12 +12,19 @@
 /* eslint no-bitwise: 0 */
 'use strict';
 
-function normalizeColor(color: string): ?number {
+function normalizeColor(color: string | number): ?number {
   var match;
 
+  if (typeof color === 'number') {
+    if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
+      return color;
+    }
+    return null;
+  }
+
   // Ordered based on occurrences on Facebook codebase
   if ((match = matchers.hex6.exec(color))) {
-    return (parseInt(match[1], 16) << 8 | 0x000000ff) >>> 0;
+    return parseInt(match[1] + 'ff', 16) >>> 0;
   }
 
   if (names.hasOwnProperty(color)) {

docs/Colors.md

@@ -8,16 +8,18 @@ permalink: docs/colors.html
 
 The following formats are supported:
 
- - `#f0f` (#rgb)
- - `#f0fc` (#rgba)
- - `#ff00ff` (#rrggbb)
- - `#ff00ff00` (#rrggbbaa)
- - `rgb(255, 255, 255)`
- - `rgba(255, 255, 255, 1.0)`
- - `hsl(360, 100%, 100%)`
- - `hsla(360, 100%, 100%, 1.0)`
- - `transparent`
- - `red`
+ - `'#f0f'` (#rgb)
+ - `'#f0fc'` (#rgba)
+ - `'#ff00ff'` (#rrggbb)
+ - `'#ff00ff00'` (#rrggbbaa)
+ - `'rgb(255, 255, 255)'`
+ - `'rgba(255, 255, 255, 1.0)'`
+ - `'hsl(360, 100%, 100%)'`
+ - `'hsla(360, 100%, 100%, 1.0)'`
+ - `'transparent'`
+ - `'red'`
+ - `0xff00ff00` (0xrrggbbaa)
+
 
 For the named colors, React Native follows the [CSS3 specification](http://www.w3.org/TR/css3-color/#svg-color):