[0.68] backport "Add partial PlatformColor support for Image's tintCo…

…lor" (#10392)

* add test example

* backporting, confirmed working

* Change files

change/react-native-windows-f4b38fb1-367a-44c5-8520-d0f178ffb25b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add PlatformColor support for Image's tintColor",
+  "packageName": "react-native-windows",
+  "email": "agnel@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/image.tsx

@@ -5,7 +5,15 @@
  */
 import React from 'react';
 import {Picker} from '@react-native-picker/picker';
-import {AppRegistry, Image, View, Text, Switch, StyleSheet} from 'react-native';
+import {
+  AppRegistry,
+  Image,
+  View,
+  Text,
+  Switch,
+  StyleSheet,
+  PlatformColor,
+} from 'react-native';
 
 const largeImageUri =
   'https://cdn.freebiesupply.com/logos/large/2x/react-logo-png-transparent.png';
@@ -69,7 +77,7 @@ export default class Bootstrap extends React.Component<
         <View style={styles.rowContainer}>
           <Text style={styles.title}>ResizeMode</Text>
           <Picker
-            style={{width: 125}}
+            style={styles.picker}
             selectedValue={this.state.selectedResizeMode}
             onValueChange={(value) =>
               this.setState({selectedResizeMode: value})
@@ -84,7 +92,7 @@ export default class Bootstrap extends React.Component<
         <View style={styles.rowContainer}>
           <Text style={styles.title}>Image Source</Text>
           <Picker
-            style={{width: 125}}
+            style={styles.picker}
             selectedValue={this.state.selectedSource}
             onValueChange={(value) => this.switchImageUri(value)}>
             <Picker.Item label="small" value="small" />
@@ -97,7 +105,7 @@ export default class Bootstrap extends React.Component<
         <View style={styles.rowContainer}>
           <Text style={styles.title}>Blur Radius</Text>
           <Picker
-            style={{width: 125}}
+            style={styles.picker}
             selectedValue={this.state.blurRadius}
             onValueChange={(value) => this.setState({blurRadius: value})}>
             <Picker.Item label="0" value={0} />
@@ -108,12 +116,13 @@ export default class Bootstrap extends React.Component<
         <View style={styles.rowContainer}>
           <Text style={styles.title}>Tint Color</Text>
           <Picker
-            style={{width: 125}}
+            style={styles.picker}
             selectedValue={this.state.tintColor}
             onValueChange={(value) => this.setState({tintColor: value})}>
             <Picker.Item label="None" value="transparent" />
             <Picker.Item label="Purple" value="purple" />
             <Picker.Item label="Green" value="green" />
+            <Picker.Item label="SystemAccentColor" value="platformcolor" />
           </Picker>
         </View>
         <View style={styles.rowContainer}>
@@ -132,7 +141,9 @@ export default class Bootstrap extends React.Component<
             style={[
               styles.image,
               this.state.includeBorder ? styles.imageWithBorder : {},
-              {tintColor: this.state.tintColor},
+              this.state.tintColor === 'platformcolor'
+                ? styles.imageWithPlatformColor
+                : {tintColor: this.state.tintColor},
             ]}
             source={
               this.state.selectedSource === 'svg'
@@ -160,6 +171,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: 5,
   },
+  picker: {
+    width: 175,
+  },
   imageContainer: {
     marginTop: 5,
     backgroundColor: 'orange',
@@ -176,6 +190,9 @@ const styles = StyleSheet.create({
     borderColor: 'green',
     backgroundColor: 'red',
   },
+  imageWithPlatformColor: {
+    tintColor: PlatformColor('SystemAccentColor'),
+  },
   title: {
     fontWeight: 'bold',
     margin: 5,

vnext/Microsoft.ReactNative/Utils/ValueUtils.cpp

@@ -117,17 +117,21 @@ struct BrushCache {
       return RegisterBrush(resourceName, brush);
     }
 
-    winrt::IInspectable resource{winrt::Application::Current().Resources().Lookup(winrt::box_value(resourceName))};
-
-    if (auto brush = resource.try_as<xaml::Media::Brush>()) {
-      return RegisterBrush(resourceName, brush);
-    } else if (auto color = resource.try_as<winrt::Windows::UI::Color>()) {
-      auto brush = xaml::Media::SolidColorBrush(color.value());
-      return RegisterBrush(resourceName, brush);
+    const auto appResources{winrt::Application::Current().Resources()};
+    const auto boxedResourceName{winrt::box_value(resourceName)};
+    if (appResources.HasKey(boxedResourceName)) {
+      winrt::IInspectable resource{appResources.Lookup(boxedResourceName)};
+
+      if (auto brush = resource.try_as<xaml::Media::Brush>()) {
+        return RegisterBrush(resourceName, brush);
+      } else if (auto color = resource.try_as<winrt::Windows::UI::Color>()) {
+        auto brush = xaml::Media::SolidColorBrush(color.value());
+        return RegisterBrush(resourceName, brush);
+      }
     }
 
     assert(false && "Resource is not a Color or Brush");
-    return nullptr;
+    return xaml::Media::SolidColorBrush(winrt::Colors::Transparent());
   }
 
   xaml::Media::Brush RegisterBrush(winrt::hstring resourceName, const xaml::Media::Brush &brush) {

vnext/Microsoft.ReactNative/Views/Image/ImageViewManager.cpp

@@ -143,7 +143,7 @@ bool ImageViewManager::UpdateProperty(
   } else if (propertyName == "tintColor") {
     const auto isValidColorValue = IsValidColorValue(propertyValue);
     if (isValidColorValue || propertyValue.IsNull()) {
-      const auto color = isValidColorValue ? ColorFrom(propertyValue) : winrt::Colors::Transparent();
+      const auto color = isValidColorValue ? SolidColorBrushFrom(propertyValue).Color() : winrt::Colors::Transparent();
       reactImage->TintColor(color);
     }
     // Override default accessibility behavior