[Fabric] Add support for PlatformColor

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "[Fabric] Add support for PlatformColor",
+ "packageName": "react-native-windows",
+ "email": "30809111+acoates-ms@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
  }
 
  if (oldActivityProps.color != newActivityProps.color) {
- m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+ m_element.Foreground(newActivityProps.color.AsWindowsBrush());
  }
 
  m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
  if (oldImageProps.tintColor != newImageProps.tintColor) {
  if (newImageProps.tintColor) {
- m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+ m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
  } else {
  m_element->TintColor(winrt::Colors::Transparent());
  }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
  if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
  if (newViewProps.textAttributes.foregroundColor)
- m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+ m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
  else
  m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
  }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
  auto color = *newViewProps.backgroundColor;
 
  if (newViewProps.backgroundColor) {
- m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+ m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
  }
  }
 
  if (oldViewProps.borderColors != newViewProps.borderColors) {
  if (newViewProps.borderColors.all) {
- m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+ m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
  } else {
  m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
  }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+ if (!m_color)
+ return nullptr;
+ if (!m_color->m_platformColor.empty()) {
+ return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+ }
+ return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+ float ratio = 255;
+ return SharedColor(ui::ColorHelper::FromArgb(
+ (int)round(components.alpha * ratio) & 0xff,
+ (int)round(components.red * ratio) & 0xff,
+ (int)round(components.green * ratio) & 0xff,
+ (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+ float ratio = 255;
+ auto color = sharedColor.AsWindowsColor();
+ return ColorComponents{
+ (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+ return color;
+}
+
+SharedColor blackColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+ return color;
+}
+
+SharedColor whiteColor() {
+ static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+ return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+ float red = 0;
+ float green = 0;
+ float blue = 0;
+ float alpha = 0;
+
+ if (value.hasType<int>()) {
+ auto argb = (int64_t)value;
+ auto ratio = 255.f;
+ alpha = ((argb >> 24) & 0xFF) / ratio;
+ red = ((argb >> 16) & 0xFF) / ratio;
+ green = ((argb >> 8) & 0xFF) / ratio;
+ blue = (argb & 0xFF) / ratio;
+ } else if (value.hasType<std::vector<float>>()) {
+ auto items = (std::vector<float>)value;
+ auto length = items.size();
+ react_native_assert(length == 3 || length == 4);
+ red = items.at(0);
+ green = items.at(1);
+ blue = items.at(2);
+ alpha = length == 4 ? items.at(3) : 1.0f;
+ // [Windows - Add support for windowsBrush colors (PlatformColor)
+ } else if (value.hasType<better::map<std::string, std::string>>()) {
+ auto map = (better::map<std::string, std::string>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "windowsbrush") {
+ result = SharedColor(std::string(pair.second));
+ return;
+ }
+ }
+ }
+ // Windows]
+
+ result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+ ColorComponents components = colorComponentsFromColor(color);
+ auto ratio = 255.f;
+ return (
+ ((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
+
+inline std::string toString(const SharedColor &value) {
+ ColorComponents components = colorComponentsFromColor(value);
+ auto ratio = 255.f;
+ return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+ folly::to<std::string>(round(components.green * ratio)) + ", " +
+ folly::to<std::string>(round(components.blue * ratio)) + ", " +
+ folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "x") {
+ result.x = pair.second;
+ } else if (pair.first == "y") {
+ result.y = pair.second;
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Point type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "width") {
+ result.width = pair.second;
+ } else if (pair.first == "height") {
+ result.height = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 2);
+ if (array.size() >= 2) {
+ result = {array.at(0), array.at(1)};
+ } else {
+ result = {0, 0};
+ LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported Size type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "top") {
+ result.top = pair.second;
+ } else if (pair.first == "left") {
+ result.left = pair.second;
+ } else if (pair.first == "bottom") {
+ result.bottom = pair.second;
+ } else if (pair.first == "right") {
+ result.right = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+ }
+ } else {
+ LOG(ERROR) << "Unsupported EdgeInsets type";
+ }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+ if (value.hasType<Float>()) {
+ auto number = (Float)value;
+ result = {number, number, number, number};
+ return;
+ }
+
+ if (value.hasType<better::map<std::string, Float>>()) {
+ auto map = (better::map<std::string, Float>)value;
+ for (const auto &pair : map) {
+ if (pair.first == "topLeft") {
+ result.topLeft = pair.second;
+ } else if (pair.first == "topRight") {
+ result.topRight = pair.second;
+ } else if (pair.first == "bottomLeft") {
+ result.bottomLeft = pair.second;
+ } else if (pair.first == "bottomRight") {
+ result.bottomRight = pair.second;
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+ react_native_assert(false);
+ }
+ }
+ return;
+ }
+
+ react_native_assert(value.hasType<std::vector<Float>>());
+ if (value.hasType<std::vector<Float>>()) {
+ auto array = (std::vector<Float>)value;
+ react_native_assert(array.size() == 4);
+ if (array.size() >= 4) {
+ result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+ } else {
+ LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+ }
+ }
+
+ // Error case - we should only here if all other supported cases fail
+ // In dev we would crash on assert before this point
+ result = {0, 0, 0, 0};
+ LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+ return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+ return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+ return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+ return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+ folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+ return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+ ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+ "}";
+}
+
+} // namespace react
+} // namespace facebook