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 #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: #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
facebook · Aug 31, 2022 · 7a6f0e4 · 7a6f0e4
1 parent 3d82f7e
commit 7a6f0e4
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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}>