[change] Image deprecate resizeMode and tintColor styles

The resizeMode and tintColor props should be used instead. The styles
will be removed in a future release.

Fix #2383

Author: necolas

package-lock.json

@@ -13,11 +13,11 @@
     "prop-types": "^15.6.0",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
-    "react-native-web": "0.18.8"
+    "react-native-web": "0.18.9"
   },
   "devDependencies": {
     "babel-loader": "^8.2.5",
-    "babel-plugin-react-native-web": "0.18.8",
+    "babel-plugin-react-native-web": "0.18.9",
     "css-loader": "^6.7.1",
     "style-loader": "^3.3.1",
     "url-loader": "^4.1.1",

packages/benchmarks/package.json

@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: url(#tint-57);"
+    style="filter: url(#tint-55);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-55"
       >
         <feflood
           flood-color="blue"
@@ -351,28 +351,29 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 </div>
 `;
 
-exports[`components/Image prop "style" supports "resizeMode" property 1`] = `
+exports[`components/Image prop "style" supports "shadow" properties (convert to filter) 1`] = `
 <div
   class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
   <div
-    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
+    style="filter: drop-shadow(1px 1px 0px rgba(255,0,0,1.00));"
   />
 </div>
 `;
 
-exports[`components/Image prop "style" supports "shadow" properties (convert to filter) 1`] = `
+exports[`components/Image prop "testID" 1`] = `
 <div
   class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  data-testid="testID"
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: drop-shadow(1px 1px 0px rgba(255,0,0,1.00));"
   />
 </div>
 `;
 
-exports[`components/Image prop "style" supports "tintcolor" property (convert to filter) 1`] = `
+exports[`components/Image prop "tintColor" convert to filter 1`] = `
 <div
   class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
@@ -405,14 +406,3 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   </svg>
 </div>
 `;
-
-exports[`components/Image prop "testID" 1`] = `
-<div
-  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
-  data-testid="testID"
->
-  <div
-    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-  />
-</div>
-`;

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -348,11 +348,6 @@ describe('components/Image', () => {
   });
 
   describe('prop "style"', () => {
-    test('supports "resizeMode" property', () => {
-      const { container } = render(<Image style={{ resizeMode: 'contain' }} />);
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
     test('supports "shadow" properties (convert to filter)', () => {
       const { container } = render(
         <Image
@@ -362,17 +357,19 @@ describe('components/Image', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('supports "tintcolor" property (convert to filter)', () => {
-      const defaultSource = { uri: 'https://google.com/favicon.ico' };
+    test('removes other unsupported View styles', () => {
       const { container } = render(
-        <Image defaultSource={defaultSource} style={{ tintColor: 'red' }} />
+        <Image style={{ overlayColor: 'red', tintColor: 'blue' }} />
       );
       expect(container.firstChild).toMatchSnapshot();
     });
+  });
 
-    test('removes other unsupported View styles', () => {
+  describe('prop "tintColor"', () => {
+    test('convert to filter', () => {
+      const defaultSource = { uri: 'https://google.com/favicon.ico' };
       const { container } = render(
-        <Image style={{ overlayColor: 'red', tintColor: 'blue' }} />
+        <Image defaultSource={defaultSource} tintColor={'red'} />
       );
       expect(container.firstChild).toMatchSnapshot();
     });

packages/react-native-web/src/exports/Image/__tests__/index-test.js

@@ -19,6 +19,7 @@ import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
 import View from '../View';
+import { warnOnce } from '../../modules/warnOnce';
 
 export type { ImageProps };
 
@@ -50,10 +51,23 @@ function createTintColorSVG(tintColor, id) {
   ) : null;
 }
 
-function getFlatStyle(style, blurRadius, filterId) {
+function getFlatStyle(style, blurRadius, filterId, tintColorProp) {
   const flatStyle = StyleSheet.flatten(style);
   const { filter, resizeMode, shadowOffset, tintColor } = flatStyle;
 
+  if (flatStyle.resizeMode) {
+    warnOnce(
+      'Image.style.resizeMode',
+      'Image: style.resizeMode is deprecated. Please use props.resizeMode.'
+    );
+  }
+  if (flatStyle.tintColor) {
+    warnOnce(
+      'Image.style.tintColor',
+      'Image: style.tintColor is deprecated. Please use props.tintColor.'
+    );
+  }
+
   // Add CSS filters
   // React Native exposes these features as props and proprietary styles
   const filters = [];
@@ -71,7 +85,7 @@ function getFlatStyle(style, blurRadius, filterId) {
       filters.push(`drop-shadow(${shadowString})`);
     }
   }
-  if (tintColor && filterId != null) {
+  if ((tintColorProp || tintColor) && filterId != null) {
     filters.push(`url(#tint-${filterId})`);
   }
 
@@ -209,12 +223,14 @@ const Image: React.AbstractComponent<
   const requestRef = React.useRef(null);
   const shouldDisplaySource =
     state === LOADED || (state === LOADING && defaultSource == null);
-  const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle(
+  const [flatStyle, _resizeMode, filter, _tintColor] = getFlatStyle(
     style,
     blurRadius,
-    filterRef.current
+    filterRef.current,
+    props.tintColor
   );
   const resizeMode = props.resizeMode || _resizeMode || 'cover';
+  const tintColor = props.tintColor || _tintColor;
   const selectedSource = shouldDisplaySource ? source : defaultSource;
   const displayImageUri = resolveAssetUri(selectedSource);
   const imageSizeStyle = resolveAssetDimensions(selectedSource);

packages/react-native-web/src/exports/Image/index.js

@@ -98,6 +98,7 @@ export type ImageStyle = {
   boxShadow?: string,
   filter?: string,
   opacity?: number,
+  // @deprecated
   resizeMode?: ResizeMode,
   tintColor?: ColorValue
 };
@@ -115,5 +116,6 @@ export type ImageProps = {
   onProgress?: (e: any) => void,
   resizeMode?: ResizeMode,
   source?: Source,
-  style?: GenericStyleProp<ImageStyle>
+  style?: GenericStyleProp<ImageStyle>,
+  tintColor?: ColorValue
 };

packages/react-native-web/src/exports/Image/types.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+const warnedKeys: { [string]: boolean, ... } = {};
+
+/**
+ * A simple function that prints a warning message once per session.
+ *
+ * @param {string} key - The key used to ensure the message is printed once.
+ *                       This should be unique to the callsite.
+ * @param {string} message - The message to print
+ */
+export function warnOnce(key: string, message: string) {
+  if (warnedKeys[key]) {
+    return;
+  }
+
+  console.warn(message);
+
+  warnedKeys[key] = true;
+}