[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
necolas · Aug 30, 2022 · 9ce0284 · 9ce0284
1 parent 4c678d2
commit 9ce0284
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.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",

diff --git a/packages/react-native-web-examples/package.json b/packages/react-native-web-examples/package.json
@@ -12,7 +12,7 @@
     "next": "^12.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native-web": "0.18.8"
+    "react-native-web": "0.18.9"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",

diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
@@ -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>
-`;
diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
@@ -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();
     });

diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.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);

diff --git a/packages/react-native-web/src/modules/warnOnce/index.js b/packages/react-native-web/src/modules/warnOnce/index.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;
+}