fix rounding for translation to android/ios colors

Summary:
Currently, there is a bug with the way that fabric translates float values for color components to hex/int value (which android uses). There are two main problems with the current setup. The first is that we are using 256 as our ratio instead of 255 which is the maximum value for any color component in hex. The second is that we cast the components to ints instead of rounding which truncates the values. We uncovered this with UIQR because our off-by-one color values were incorrectly off a little bit extra for fabric surfaces.

Changelog: [Internal] updates the float-to-int value conversion for color components to be fully accurate

Reviewed By: shergin

Differential Revision: D26161396

fbshipit-source-id: 884e27ffa01b116f9307c00298bb8d888f9f6dd7

ReactCommon/react/renderer/graphics/conversions.h

@@ -51,10 +51,10 @@ inline folly::dynamic toDynamic(const SharedColor &color) {
   ColorComponents components = colorComponentsFromColor(color);
   auto ratio = 255.f;
   return (
-      ((int)(components.alpha * ratio) & 0xff) << 24 |
-      ((int)(components.red * ratio) & 0xff) << 16 |
-      ((int)(components.green * ratio) & 0xff) << 8 |
-      ((int)(components.blue * ratio) & 0xff));
+      ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff));
 }
 
 #endif

ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.cpp

@@ -11,16 +11,16 @@ namespace facebook {
 namespace react {
 
 SharedColor colorFromComponents(ColorComponents components) {
-  float ratio = 255.9999;
+  float ratio = 255;
   return SharedColor(
-      ((int)(components.alpha * ratio) & 0xff) << 24 |
-      ((int)(components.red * ratio) & 0xff) << 16 |
-      ((int)(components.green * ratio) & 0xff) << 8 |
-      ((int)(components.blue * ratio) & 0xff));
+      ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff));
 }
 
 ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
-  float ratio = 256;
+  float ratio = 255;
   Color color = *sharedColor;
   return ColorComponents{
       (float)((color >> 16) & 0xff) / ratio,

ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <cmath>
 #include <functional>
 #include <limits>
 

ReactCommon/react/renderer/graphics/platform/ios/Color.cpp

@@ -12,12 +12,12 @@ namespace facebook {
 namespace react {
 
 SharedColor colorFromComponents(ColorComponents components) {
-  float ratio = 255.9999;
+  float ratio = 255;
   return SharedColor(
-      ((int)(components.alpha * ratio) & 0xff) << 24 |
-      ((int)(components.red * ratio) & 0xff) << 16 |
-      ((int)(components.green * ratio) & 0xff) << 8 |
-      ((int)(components.blue * ratio) & 0xff));
+      ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff));
 }
 
 ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
@@ -27,7 +27,7 @@ ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
     return ColorComponents{0, 0, 0, 0};
   }
 
-  float ratio = 256;
+  float ratio = 255;
   Color color = *sharedColor;
   return ColorComponents{
       (float)((color >> 16) & 0xff) / ratio,

ReactCommon/react/renderer/graphics/platform/ios/Color.h

@@ -8,6 +8,7 @@
 #pragma once
 
 #include <better/optional.h>
+#include <cmath>
 
 #include <react/renderer/graphics/ColorComponents.h>
 #include <react/renderer/graphics/Float.h>