From 7a6f0e44b26b7a6eddb25d5e05948a1992a1629e Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Wed, 31 Aug 2022 07:23:48 -0700
Subject: [PATCH] feat: Add tintColor prop to Image component (#34534)

Summary:
This adds the `tintColor` prop to the Image component to replace the non-standard `style.tintColor` as requested on https://github.com/facebook/react-native/issues/34424, so that React Native for Web does not have to deopt styles for Image rendering. I didn't have to change anything on Android as `tintColor` was already being passed down to the native component as a prop. This PR also updates RNTester ImageExample in order to facilitate the manual QA.

## Changelog

[General] [Added] - Add tintColor prop to Image component

Pull Request resolved: https://github.com/facebook/react-native/pull/34534

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. Test the `tintColor` prop through the `Tint Color` section

https://user-images.githubusercontent.com/11707729/187444761-ce5fd949-89f3-4d73-9717-31d035c6ee6b.mov

Reviewed By: necolas

Differential Revision: D39133292

Pulled By: jacdebug

fbshipit-source-id: 314e0ed47ab65366153e730667a31554bc2b6aa7
---
 Libraries/Image/Image.ios.js                  |  2 +-
 Libraries/Image/ImageProps.js                 | 13 ++++-
 .../js/examples/Image/ImageExample.js         | 52 ++++++++++++++++++-
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
index f4c5ca3ca421a5..98631a33555bc5 100644
--- a/Libraries/Image/Image.ios.js
+++ b/Libraries/Image/Image.ios.js
@@ -129,7 +129,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   // $FlowFixMe[prop-missing]
   const resizeMode = props.resizeMode || style.resizeMode || 'cover';
   // $FlowFixMe[prop-missing]
-  const tintColor = style.tintColor;
+  const tintColor = props.tintColor || style.tintColor;
 
   if (props.src != null) {
     console.warn(
diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js
index 6bb36fedb5d4aa..d640bd7f543892 100644
--- a/Libraries/Image/ImageProps.js
+++ b/Libraries/Image/ImageProps.js
@@ -13,7 +13,11 @@
 import type {SyntheticEvent, LayoutEvent} from '../Types/CoreEventTypes';
 import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType';
 import type {ImageSource} from './ImageSource';
-import type {ViewStyleProp, ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {
+  ColorValue,
+  ViewStyleProp,
+  ImageStyleProp,
+} from '../StyleSheet/StyleSheet';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {Node, Ref} from 'react';
 import typeof Image from './Image';
@@ -170,6 +174,13 @@ export type ImageProps = {|
    */
   testID?: ?string,
 
+  /**
+   * Changes the color of all the non-transparent pixels to the tintColor.
+   *
+   * See https://reactnative.dev/docs/image#tintcolor
+   */
+  tintColor?: ColorValue,
+
   src?: empty,
   children?: empty,
 |};
diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
index 729673c65b778d..5c257c81f44787 100644
--- a/packages/rn-tester/js/examples/Image/ImageExample.js
+++ b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -937,27 +937,77 @@ exports.examples = [
   },
   {
     title: 'Tint Color',
-    description: ('The `tintColor` style prop changes all the non-alpha ' +
+    description: ('The `tintColor` prop changes all the non-alpha ' +
       'pixels to the tint color.': string),
     render: function (): React.Node {
       return (
         <View>
+          <View style={styles.horizontal}>
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
+              tintColor={'#5ac8fa'}
+            />
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5}]}
+              tintColor={'#4cd964'}
+            />
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5}]}
+              tintColor={'#ff2d55'}
+            />
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5}]}
+              tintColor={'#8e8e93'}
+            />
+          </View>
+          <Text style={styles.sectionText}>
+            It also works using the `tintColor` style prop
+          </Text>
+          <View style={styles.horizontal}>
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa'}]}
+            />
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5, tintColor: '#4cd964'}]}
+            />
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
+            />
+            <Image
+              source={require('../../assets/uie_thumb_normal.png')}
+              style={[styles.icon, {borderRadius: 5, tintColor: '#8e8e93'}]}
+            />
+          </View>
+          <Text style={styles.sectionText}>
+            The `tintColor` prop has precedence over the `tintColor` style prop
+          </Text>
           <View style={styles.horizontal}>
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
               style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa'}]}
+              tintColor={'#5ac8fa'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
               style={[styles.icon, {borderRadius: 5, tintColor: '#4cd964'}]}
+              tintColor={'#5ac8fa'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
               style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
+              tintColor={'#5ac8fa'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
               style={[styles.icon, {borderRadius: 5, tintColor: '#8e8e93'}]}
+              tintColor={'#5ac8fa'}
             />
           </View>
           <Text style={styles.sectionText}>